/* --== Eidolon Encounter ==-- */

#eidolonScreen {
  position: relative;
  overflow: hidden;
  background: #000;
  color: #fff;
}

#eidolonContent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "3270", sans-serif;
  font-size: 17px;
}

#eidolonLobby,
#eidolonGame {
  position: absolute;
  inset: 0;
}

#eidolonLobby {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(14px, 2vw, 28px);
  background:
    linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.78)),
    url("../assets/eidolon-encounter/eidolonLobbyBg.jpg") center / cover
      no-repeat;
}

#eidolonLobby.inactive,
#eidolonGame.inactive {
  display: none !important;
}

.eidolonLobbyPanel {
  width: min(920px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 3vw, 34px);
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid #b0e0ff;
  box-shadow: 0 0 32px rgba(176, 224, 255, 0.12);
  backdrop-filter: blur(4px);
}

.eidolonLobbyTitle {
  text-align: center;
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: 0.08em;
  line-height: 1;
}

.eidolonLobbySubtitle {
  text-align: center;
  font-size: clamp(14px, 2vw, 20px);
  color: #b0e0ff;
  letter-spacing: 0.1em;
}

#eidolonReadySummary {
  text-align: center;
  font-size: clamp(18px, 2.4vw, 28px);
  color: #d7eefc;
}

#eidolonPlayerList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.eidolonLobbyPlayer {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(5, 8, 10, 0.92);
  border: 1px solid #4d5e69;
  font-size: 18px;
}

.eidolonLobbyPlayer.me {
  border-color: #b0e0ff;
}

.eidolonLobbyPlayer.ready {
  box-shadow: inset 3px 0 0 #70d38c;
}

.eidolonPlayerColor {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
}

.eidolonPlayerName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eidolonPlayerStatus {
  font-size: 14px;
  color: #8d9aa2;
}

.eidolonLobbyPlayer.ready .eidolonPlayerStatus {
  color: #9fe4b1;
}

.eidolonLobbyControls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.eidolonButton {
  min-width: 150px;
  padding: 9px 15px;
  color: #fff;
  background: #080b0d;
  border: 1px solid #b0e0ff;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.eidolonButton:hover:not(:disabled),
.eidolonButton.active {
  color: #000;
  background: #b0e0ff;
}

.eidolonButton.ready {
  border-color: #70d38c;
  color: #9fe4b1;
}

.eidolonButton.ready:hover {
  color: #000;
  background: #70d38c;
}

.eidolonButton:disabled {
  opacity: 0.38;
  cursor: default;
}

#eidolonStartButton {
  border-color: #ffdd55;
  color: #ffdd55;
}

#eidolonStartButton:not(:disabled):hover {
  color: #000;
  background: #ffdd55;
}

/* --== Board ==-- */

#eidolonGame {
  background: #000;
}

#eidolonBoardViewport {
  position: absolute;
  inset: 4px 6px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#eidolonBoard {
  --eidolon-cols: 20;
  --eidolon-rows: 16;
  position: relative;
  width: min(100%, calc((100vh - 118px) * 20 / 16));
  aspect-ratio: 20 / 16;
  max-height: 100%;
  background: #000;
  box-shadow: 0 0 24px rgba(176, 224, 255, 0.08);
  overflow: hidden;
}

#eidolonGrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--eidolon-cols), 1fr);
  grid-template-rows: repeat(var(--eidolon-rows), 1fr);
  background: #000;
}

.eidolonCell {
  position: relative;
  border: 0;
  background: #000;
  box-shadow: none;
}

.eidolonCell:not(.walkable) {
  background: #000 !important;
  box-shadow: none !important;
}

.eidolonCell:not(.walkable)::before,
.eidolonCell:not(.walkable)::after {
  display: none !important;
}

.eidolonCell.walkable {
  background: #05090b;
  box-shadow: inset -1px -1px 0 rgba(176, 224, 255, 0.105);
}

.eidolonCell.task {
  background: #d27a18;
  box-shadow: inset 0 0 0 1px #f4a536;
}

.eidolonCell.safe {
  background: #2fc741;
  box-shadow: inset 0 0 0 1px #75ef84;
}

.eidolonCell.final {
  background: #c91e25;
  box-shadow: inset 0 0 0 1px #ff5a60;
}

.eidolonCell.van {
  background: #24155d;
  box-shadow: inset 0 0 0 1px #6a58cb;
}

.eidolonCell.reachable {
  cursor: pointer;
}

.eidolonCell.reachable::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 3;
  background: transparent;
  box-shadow:
    inset 0 0 13px 2px rgba(176, 224, 255, var(--reach-opacity, 0.2)),
    inset 0 0 0 1px rgba(214, 241, 255, var(--reach-opacity, 0.2)),
    0 0 5px rgba(176, 224, 255, 0.08);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .eidolonCell.reachable:hover::after {
    box-shadow:
      inset 0 0 16px 3px rgba(255, 221, 85, 0.62),
      inset 0 0 0 1px rgba(255, 238, 165, 0.82),
      0 0 8px rgba(255, 221, 85, 0.5);
  }
}

.eidolonRoom {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 0;
  color: rgba(238, 247, 252, 0.92);
  background: transparent;
  text-align: center;
  font-size: clamp(10px, 1.3vw, 20px);
  line-height: 1.05;
  text-shadow: 0 2px 4px #000;
}

.eidolonRoom-van {
  background: rgba(52, 28, 137, 0.12);
}

.eidolonRoom.locked {
  outline: 2px solid #ff5454;
  outline-offset: -3px;
  box-shadow: inset 0 0 16px rgba(255, 84, 84, 0.18);
}

.eidolonRoom::after {
  content: attr(data-name);
  max-width: 90%;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.48);
  white-space: pre-line;
}

#eidolonWalls {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

#eidolonDoorways {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.eidolonDoorway {
  position: absolute;
  filter: drop-shadow(0 0 4px rgba(176, 224, 255, 0.72));
}

.eidolonDoorway.horizontal {
  height: 8px;
  transform: translateY(-50%);
  border-left: 3px solid rgba(176, 224, 255, 0.9);
  border-right: 3px solid rgba(176, 224, 255, 0.9);
  background: linear-gradient(
    to bottom,
    transparent 42%,
    rgba(176, 224, 255, 0.38) 43%,
    rgba(176, 224, 255, 0.38) 57%,
    transparent 58%
  );
}

.eidolonDoorway.vertical {
  width: 8px;
  transform: translateX(-50%);
  border-top: 3px solid rgba(176, 224, 255, 0.9);
  border-bottom: 3px solid rgba(176, 224, 255, 0.9);
  background: linear-gradient(
    to right,
    transparent 42%,
    rgba(176, 224, 255, 0.38) 43%,
    rgba(176, 224, 255, 0.38) 57%,
    transparent 58%
  );
}

.eidolonWall {
  position: absolute;
  background: #010203;
  box-shadow:
    0 0 0 1px rgba(176, 224, 255, 0.42),
    0 0 7px rgba(0, 0, 0, 0.9);
}

.eidolonWall.vertical {
  width: 4px;
  transform: translateX(-50%);
}

.eidolonWall.horizontal {
  height: 4px;
  transform: translateY(-50%);
}

#eidolonBoard.moving .eidolonCell.reachable {
  pointer-events: none;
}

/* --== Player Pieces ==-- */

.eidolonPlayerPiece {
  position: absolute;
  z-index: 12;
  width: calc(100% / 20 * 1.08);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    left 0.31s cubic-bezier(0.22, 0.78, 0.2, 1),
    top 0.31s cubic-bezier(0.22, 0.78, 0.2, 1);
  pointer-events: none;
}

.eidolonPlayerToken {
  position: relative;
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

.eidolonPlayerToken .cursor-inner {
  z-index: 2;
}

.eidolonPlayerPiece.animating .eidolonPlayerToken {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(176, 224, 255, 0.9));
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.eidolonPlayerPiece.current::before {
  content: "";
  position: absolute;
  inset: 2%;
  border: 2px solid #ffdd55;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffdd55;
}

.eidolonPlayerPiece.dead {
  opacity: 0.38;
  filter: grayscale(1);
}

.eidolonPlayerPiece::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-size: clamp(8px, 0.75vw, 12px);
  white-space: nowrap;
  text-shadow:
    0 1px 4px #000,
    0 1px 4px #000;
}

.eidolonCorpseToken {
  position: absolute;
  z-index: 11;
  width: calc(100% / 20 * 0.58);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid;
  opacity: 0.62;
  pointer-events: none;
}

/* --== Side Drawer ==-- */

#eidolonSideDrawer {
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 42;
  width: min(350px, 36vw);
  transform: translateX(calc(-100% + 34px));
  transition: transform 0.22s ease;
  pointer-events: none;
}

#eidolonSideDrawer.open {
  transform: translateX(0);
}

#eidolonSidePanel {
  margin-right: 34px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #657985;
  border-left: 0;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

#eidolonSideToggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  min-width: 34px;
  height: 56px;
  padding: 0;
  color: #b0e0ff;
  background: #05080a;
  border: 1px solid #657985;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
  pointer-events: auto;
}

#eidolonBoardHud {
  font-size: clamp(13px, 1.3vw, 19px);
  line-height: 1.3;
}

#eidolonBoardHud .accent {
  color: #b0e0ff;
}

#eidolonDice {
  margin-top: 10px;
  padding: 7px 10px;
  text-align: center;
  background: rgba(4, 7, 9, 0.9);
  border: 1px solid #657985;
  font-size: clamp(15px, 1.55vw, 22px);
}

#eidolonActionButtons {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

#eidolonActionButtons .eidolonButton {
  min-width: 0;
  width: 100%;
  font-size: clamp(13px, 1.2vw, 18px);
}

#eidolonNoticeDrawer {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 44;
  width: min(720px, calc(100% - 110px));
  display: grid;
  grid-template-rows: auto 30px;
  justify-items: center;
  transform: translate(-50%, 0);
  transition: transform 0.24s cubic-bezier(0.22, 0.78, 0.2, 1);
  pointer-events: none;
}

#eidolonNoticeDrawer.inactive {
  display: none;
}

#eidolonNoticeDrawer.collapsed {
  transform: translate(-50%, calc(-100% + 30px));
}

#eidolonNotice {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #b0e0ff;
  border-top: 0;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 20px);
  pointer-events: none;
}

#eidolonNoticeToggle {
  width: 58px;
  min-width: 58px;
  height: 30px;
  padding: 0;
  color: #b0e0ff;
  background: #05080a;
  border: 1px solid #657985;
  border-top: 0;
  font: inherit;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  pointer-events: auto;
}

#eidolonQuickControls {
  position: absolute;
  top: 8px;
  right: 7px;
  z-index: 43;
  display: flex;
  align-items: stretch;
  max-width: min(560px, 70vw);
  transform: translateX(0);
  transition:
    opacity 0.18s ease,
    transform 0.22s ease;
  pointer-events: auto;
}

#eidolonQuickControls.sideOpen {
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
}

#eidolonQuickControlsBody {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 4px;
  background: rgba(0, 0, 0, 0.86);
  border: 1px solid #657985;
  border-right: 0;
  overflow: hidden;
  transition:
    max-width 0.22s ease,
    padding 0.22s ease,
    opacity 0.16s ease;
  max-width: 520px;
}

#eidolonQuickControls.collapsed #eidolonQuickControlsBody {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-color: transparent;
}

#eidolonQuickToggle {
  order: 2;
  width: 30px;
  min-width: 30px;
  padding: 0;
  color: #b0e0ff;
  background: #05080a;
  border: 1px solid #657985;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}

#eidolonQuickDice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 3px 7px;
  color: #b0e0ff;
  border: 1px solid #3b4b54;
  font-size: 13px;
  white-space: nowrap;
}

#eidolonQuickActionButtons {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.eidolonQuickAction {
  min-width: 48px;
  min-height: 30px;
  padding: 3px 7px;
  color: #fff;
  background: #080b0d;
  border: 1px solid #b0e0ff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.eidolonQuickAction:hover {
  color: #000;
  background: #b0e0ff;
}

@keyframes eidolonGoldPulse {
  0%,
  100% {
    box-shadow: 0 0 7px rgba(255, 221, 85, 0.5);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 221, 85, 1),
      inset 0 0 9px rgba(255, 221, 85, 0.28);
  }
}

.eidolonTutorialGlow {
  border-color: #ffdd55 !important;
  color: #ffdd55 !important;
  animation: eidolonGoldPulse 1.1s ease-in-out infinite;
}

.eidolonHuntRollButton {
  border-color: #ffdd55 !important;
  color: #ffdd55 !important;
  text-shadow: 0 0 7px rgba(255, 221, 85, 0.45);
}

@keyframes eidolonHuntResultFlash {
  0%,
  100% {
    filter: none;
  }
  35% {
    filter: drop-shadow(0 0 14px rgba(255, 221, 85, 0.95));
  }
}

#eidolonNoticeDrawer.huntResultFlash,
#eidolonDice.huntResultFlash {
  animation: eidolonHuntResultFlash 0.9s ease both;
}

/* --== Current Task Hand ==-- */
.eidolonPinnedTask {
  position: absolute;
  top: 16px;
  right: clamp(14px, 2vw, 28px);
  z-index: 36;
  width: clamp(96px, 9.5vw, 132px);
  aspect-ratio: 2 / 3;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 1px solid #8297a2;
  border-radius: 3px;
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.88),
    0 0 8px rgba(176, 224, 255, 0.16);
  font: inherit;
  text-align: center;
  transform: rotate(-6deg);
  transform-origin: 55% 10%;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 0.78, 0.2, 1),
    filter 0.2s ease;
}

.eidolonPinnedTask.inactive {
  display: none !important;
}

.eidolonPinnedTask.awaitingArrival {
  opacity: 0;
}

.eidolonPinnedTask.arrived {
  animation: eidolonPinnedTaskSettle 0.4s cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

@keyframes eidolonPinnedTaskSettle {
  0% {
    transform: rotate(-10deg) translateY(-7px) scale(1.08);
    filter: drop-shadow(0 0 12px rgba(255, 221, 85, 0.55));
  }
  100% {
    transform: rotate(-6deg) translateY(0) scale(1);
    filter: none;
  }
}

.eidolonPinnedTaskType,
.eidolonPinnedTaskTitle,
.eidolonPinnedTaskBody {
  position: absolute;
  left: 8%;
  right: 8%;
  display: block;
  text-shadow:
    0 2px 4px #000,
    0 2px 4px #000;
}

.eidolonPinnedTaskType {
  top: 13%;
  color: #b0e0ff;
  font-size: clamp(8px, 0.65vw, 11px);
  letter-spacing: 0.08em;
}

.eidolonPinnedTaskTitle {
  top: 38%;
  font-size: clamp(10px, 0.95vw, 15px);
  line-height: 1.05;
}

.eidolonPinnedTaskBody {
  bottom: 13%;
  max-height: 25%;
  overflow: hidden;
  font-size: clamp(8px, 0.64vw, 10px);
  line-height: 1.05;
}

@media (hover: hover) and (pointer: fine) {
  .eidolonPinnedTask:hover {
    transform: rotate(-3deg) translateY(4px) scale(1.04);
    filter: drop-shadow(0 0 8px rgba(176, 224, 255, 0.48));
  }
}

.eidolonTaskPullGhost {
  position: absolute;
  z-index: 93;
  border: 1px solid #8297a2;
  border-radius: 3px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 9px 28px rgba(0, 0, 0, 0.92);
  transform: rotate(0deg) scale(0.96);
  transform-origin: 55% 10%;
  transition:
    left 0.56s cubic-bezier(0.16, 0.82, 0.2, 1),
    top 0.56s cubic-bezier(0.16, 0.82, 0.2, 1),
    width 0.56s cubic-bezier(0.16, 0.82, 0.2, 1),
    height 0.56s cubic-bezier(0.16, 0.82, 0.2, 1),
    transform 0.56s cubic-bezier(0.16, 0.82, 0.2, 1);
  pointer-events: none;
}

.eidolonTaskPullGhost.flying {
  transform: rotate(-6deg) scale(1);
}

.eidolonTaskPullGhost.flipping {
  transform: rotate(-6deg) scaleX(0.06);
  transition: transform 0.17s ease-in;
}

/* --== Deck Shelf ==-- */

#eidolonDeckShelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: 136px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(5px, 1.1vw, 16px);
  padding: 0 10px;
  pointer-events: none;
}

.eidolonDeck {
  --deck-front: none;
  --deck-back: none;
  position: relative;
  width: clamp(112px, 13vw, 180px);
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  perspective: 760px;
  transform: translateY(calc(100% - 78px));
  transition:
    transform 0.2s cubic-bezier(0.2, 0.78, 0.2, 1),
    filter 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
}

.eidolonDeck:hover,
.eidolonDeck.expanded,
.eidolonDeck.actionable {
  transform: translateY(10px);
  z-index: 4;
}

.eidolonDeck::before,
.eidolonDeck::after,
.eidolonDeckCard {
  position: absolute;
  inset: 0;
  border: 1px solid #718792;
  border-radius: 3px;
  box-shadow: 0 2px 6px #000;
}

.eidolonDeck::before,
.eidolonDeck::after {
  content: "";
  background-image: var(--deck-back);
  background-position: center;
  background-size: cover;
}

.eidolonDeck::before {
  transform: translate(-4px, 4px);
  opacity: 0.55;
}

.eidolonDeck::after {
  transform: translate(-2px, 2px);
  opacity: 0.8;
}

.eidolonDeckCard {
  z-index: 1;
  background: transparent;
  transform-style: preserve-3d;
  transition:
    transform 0.34s cubic-bezier(0.2, 0.78, 0.2, 1),
    filter 0.18s ease,
    translate 0.18s ease,
    scale 0.18s ease;
}

.eidolonDeckCard::before,
.eidolonDeckCard::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #718792;
  border-radius: 3px;
  background-position: center;
  background-size: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.eidolonDeckCard::before {
  background-image: var(--deck-back);
}

.eidolonDeckCard::after {
  background-image: var(--deck-front);
  transform: rotateY(180deg);
}

.eidolonDeck.faceup .eidolonDeckCard,
.eidolonDeck.fanned:not(.faceup) .eidolonDeckCard {
  transform: rotateY(180deg);
}

.eidolonDeck.faceup.fanned .eidolonDeckCard {
  transform: rotateY(0deg);
}

.eidolonDeck.actionable .eidolonDeckCard {
  box-shadow:
    0 0 18px rgba(255, 221, 85, 0.8),
    0 2px 6px #000;
}

.eidolonDeck.actionable .eidolonDeckCard::before,
.eidolonDeck.actionable .eidolonDeckCard::after {
  border-color: #ffdd55;
}

.eidolonDeckLabel,
.eidolonDeckCount,
.eidolonDeckStored,
.eidolonDeckPrompt {
  transition: opacity 0.14s ease;
}

.eidolonDeckLabel {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  z-index: 5;
  padding: 4px 2px;
  color: #fff;
  background: rgba(0, 0, 0, 0.76);
  text-align: center;
  font-size: clamp(10px, 0.95vw, 15px);
  line-height: 1.05;
  text-shadow: 0 1px 2px #000;
}

.eidolonDeckCount {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 5;
  transform: translateX(-50%);
  min-width: 28px;
  padding: 2px 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-align: center;
  font-size: 13px;
}

.eidolonDeckPrompt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: none;
  padding: 5px 9px;
  background: #000;
  border: 1px solid #ffdd55;
  color: #ffdd55;
  font-size: 16px;
}

.eidolonDeck.actionable .eidolonDeckPrompt {
  display: block;
}

.eidolonDeck.fanned .eidolonDeckLabel,
.eidolonDeck.fanned .eidolonDeckCount,
.eidolonDeck.fanned .eidolonDeckStored,
.eidolonDeck.fanned .eidolonDeckPrompt {
  opacity: 0;
  pointer-events: none;
}

@keyframes eidolonCardGhostSettle {
  from {
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.82));
  }
  to {
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.72));
  }
}

.eidolonCardPullGhost {
  position: absolute;
  z-index: 94;
  border: 1px solid #8297a2;
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.9);
  transform: rotate(-8deg) scale(0.96);
  transform-style: preserve-3d;
  transition:
    left 0.52s cubic-bezier(0.18, 0.78, 0.2, 1),
    top 0.52s cubic-bezier(0.18, 0.78, 0.2, 1),
    width 0.52s cubic-bezier(0.18, 0.78, 0.2, 1),
    height 0.52s cubic-bezier(0.18, 0.78, 0.2, 1),
    transform 0.18s ease,
    opacity 0.18s ease;
  pointer-events: none;
  overflow: hidden;
}

.eidolonCardPullGhost.pulling {
  transform: rotate(2deg) scale(1);
}

.eidolonCardPullGhost.flipOut {
  transform: rotate(1deg) rotateY(88deg) scale(1.03);
}

.eidolonCardPullGhost.flipIn {
  transform: rotate(-1deg) rotateY(0deg) scale(1.03);
}

.eidolonCardPullGhost.settling {
  transform: rotate(0deg) scale(1);
  animation: eidolonCardGhostSettle 0.18s ease both;
}

.eidolonCardPullGhostTitle {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  font-size: clamp(16px, 2vw, 28px);
  line-height: 1.05;
  text-shadow:
    0 2px 5px #000,
    0 2px 5px #000;
}

/* --== Cards / Panels ==-- */

.eidolonCardViewer,
#eidolonSettingsPanel,
#eidolonRuleBook {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.eidolonCardViewer.inactive,
#eidolonSettingsPanel.inactive,
#eidolonRuleBook.inactive {
  display: none !important;
}

.eidolonCardViewerPanel,
.eidolonSettingsInner,
.eidolonRuleBookInner {
  width: min(840px, 100%);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #050708;
  border: 1px solid #b0e0ff;
}

.eidolonCardViewerTop,
.eidolonSettingsTop,
.eidolonRuleBookTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 20px;
}

@keyframes eidolonPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.eidolonCardViewer:not(.inactive) .eidolonCardViewerPanel,
#eidolonSettingsPanel:not(.inactive) .eidolonSettingsInner,
#eidolonRuleBook:not(.inactive) .eidolonRuleBookInner {
  animation: eidolonPanelIn 0.24s cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.eidolonCardViewerBody {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.eidolonCard {
  position: relative;
  width: min(340px, 72vw);
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  border: 1px solid #8297a2;
  box-shadow: 0 6px 22px #000;
}

.eidolonCardText {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14% 10% 10%;
  color: #fff;
  text-align: center;
  text-shadow:
    0 2px 4px #000,
    0 2px 4px #000;
}

.eidolonCardType {
  flex: 0 0 auto;
  font-size: clamp(11px, 1.15vw, 16px);
  letter-spacing: 0.16em;
}

.eidolonCardTitle {
  flex: 0 0 auto;
  font-size: clamp(18px, 2.6vw, 30px);
  line-height: 1;
}

.eidolonCardDetails {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 5px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 224, 255, 0.65) transparent;
}

.eidolonCardDetails::-webkit-scrollbar {
  width: 5px;
}

.eidolonCardDetails::-webkit-scrollbar-thumb {
  background: rgba(176, 224, 255, 0.65);
}

.eidolonCardStory {
  font-size: clamp(11px, 1.2vw, 15px);
  line-height: 1.22;
  color: #e6edf1;
  white-space: pre-line;
}

.eidolonCardEffect {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 221, 85, 0.62);
}

.eidolonCardEffectLabel {
  margin-bottom: 5px;
  color: #ffdd55;
  font-size: clamp(10px, 1.05vw, 14px);
  letter-spacing: 0.14em;
}

.eidolonCardBody {
  font-size: clamp(11px, 1.25vw, 16px);
  line-height: 1.23;
  color: #fff;
  white-space: pre-line;
}

.eidolonCardNav {
  min-width: 48px;
  min-height: 48px;
  color: #fff;
  background: #000;
  border: 1px solid #b0e0ff;
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}

.eidolonCardNav:disabled {
  opacity: 0.25;
  cursor: default;
}

#eidolonCardCounter {
  text-align: center;
  font-size: 16px;
  color: #aab9c2;
}

.eidolonSettingsInner {
  width: min(680px, 100%);
  max-height: min(84vh, 680px);
  gap: 0;
  padding: 14px 16px 16px;
  background: #020405;
  border: 1px solid #b0e0ff;
  box-shadow: 0 0 30px rgba(176, 224, 255, 0.1);
}

.eidolonSettingsTop {
  min-height: 42px;
  color: #b0e0ff;
  font-size: clamp(18px, 2vw, 24px);
}

.eidolonSettingsReturn {
  min-width: 90px;
  padding: 5px 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.eidolonSettingsReturn:hover,
.eidolonSettingsReturn:focus-visible {
  color: #000;
  background: #b0e0ff;
  border-color: #b0e0ff;
  outline: none;
}

.eidolonSettingsInner > .divider {
  flex: 0 0 auto;
  margin: 4px 0 12px;
}

.eidolonSettingsBody {
  min-height: 0;
  max-height: min(64vh, 540px);
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  font-size: 18px;
  scrollbar-width: thin;
}

.eidolonSettingsBody::-webkit-scrollbar {
  width: 8px;
}

.eidolonSettingsBody::-webkit-scrollbar-thumb {
  background: #b0e0ff;
}

.eidolonSettingsGroupLabel {
  padding: 5px 8px 8px;
  color: #718792;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.eidolonSettingRow {
  width: 100%;
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 11px 9px;
  color: #eaf6fb;
  background: transparent;
  border: 0;
  border-top: 1px solid #26323a;
  text-align: left;
}

.eidolonSettingRow:last-child {
  border-bottom: 1px solid #26323a;
}

.eidolonSettingName {
  min-width: 0;
  flex: 1 1 auto;
}

.eidolonSettingControl {
  min-width: 0;
  flex: 0 1 310px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.eidolonSettingRow input[type="range"] {
  width: min(250px, 38vw);
  accent-color: #b0e0ff;
}

.eidolonSettingRow output,
.eidolonSettingStatus {
  flex: 0 0 auto;
  min-width: 5.8ch;
  color: #b0e0ff;
  font-size: 15px;
  text-align: right;
}

.eidolonCheckboxControl {
  flex-basis: auto;
}

.eidolonCheckboxControl input {
  width: 20px;
  height: 20px;
  accent-color: #b0e0ff;
}

.eidolonSettingButton {
  font: inherit;
  cursor: pointer;
}

.eidolonSettingButton:hover:not(:disabled),
.eidolonSettingButton:focus-visible {
  color: #000;
  background: #b0e0ff;
  outline: none;
}

.eidolonSettingButton:hover:not(:disabled) .eidolonSettingStatus,
.eidolonSettingButton:focus-visible .eidolonSettingStatus {
  color: #000;
}

.eidolonSettingButton:disabled {
  opacity: 0.48;
  cursor: default;
}

.eidolonRuleBookInner {
  width: min(940px, 100%);
}

.eidolonRuleBookBody {
  min-height: 0;
  max-height: min(68vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  padding-right: 8px;
  font-size: 16px;
  line-height: 1.38;
}

.eidolonRuleBookBody.scroll-box {
  display: grid;
}

.eidolonRuleLegend {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid #26323a;
}

.eidolonRuleLegendItem {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #eaf6fb;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
}

.eidolonRuleColor {
  width: clamp(34px, 4vw, 50px);
  aspect-ratio: 1;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 0 8px rgba(255, 255, 255, 0.08);
}

.eidolonRuleColor.safe {
  background: #2fc741;
}
.eidolonRuleColor.task {
  background: #d27a18;
}
.eidolonRuleColor.final {
  background: #c91e25;
}
.eidolonRuleColor.van {
  background: #24155d;
}

.eidolonRuleQuickExplain {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 2px 0 12px;
  border-bottom: 1px solid #26323a;
}

.eidolonRuleQuickExplain > strong {
  color: #b0e0ff;
  font-size: 18px;
}

#eidolonQuickExplanation {
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  color: #edf8fc;
  background: #010304;
  border: 1px solid #4b6471;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
}

.eidolonRuleSection {
  padding: 10px 0;
  border-bottom: 1px solid #26323a;
}

.eidolonRuleSection strong {
  display: block;
  margin-bottom: 5px;
  color: #b0e0ff;
  font-size: 18px;
}

/* --== Live Multiplayer Cursors ==-- */

#eidolonContent > #cursorField.eidolonCursorField {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

#eidolonContent > #cursorField.eidolonCursorField .cursor {
  z-index: 101;
}

/* --== Mobile ==-- */

@media (max-width: 620px) {
  .eidolonRuleLegend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .eidolonRuleLegendItem {
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  #eidolonBoardViewport {
    inset: 4px 4px 96px;
  }

  #eidolonSideDrawer {
    top: 5px;
    width: min(330px, 66vw);
  }

  #eidolonDeckShelf {
    height: 106px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  #eidolonDeckShelf::-webkit-scrollbar {
    display: none;
  }

  .eidolonDeck {
    width: 116px;
    transform: translateY(calc(100% - 62px));
  }

  .eidolonDeck:hover {
    transform: translateY(calc(100% - 62px));
  }

  .eidolonDeck.expanded,
  .eidolonDeck.actionable {
    transform: translateY(8px);
  }

  #eidolonNoticeDrawer {
    top: 0;
    width: min(680px, calc(100% - 70px));
  }

  #eidolonQuickControls {
    top: 5px;
    right: 5px;
    max-width: 74vw;
  }

  .eidolonLobbyPanel {
    max-height: 100%;
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .eidolonLobbyTitle {
    font-size: 30px;
  }

  .eidolonLobbySubtitle {
    font-size: 13px;
  }

  #eidolonPlayerList {
    grid-template-columns: 1fr;
  }

  .eidolonLobbyPlayer {
    font-size: 15px;
  }

  .eidolonButton {
    min-width: 120px;
    min-height: 42px;
    font-size: 15px;
  }

  #eidolonBoard {
    width: 100%;
  }

  .eidolonRoom {
    border-width: 1px;
    font-size: 7px;
  }

  .eidolonPlayerPiece::after {
    display: none;
  }

  @keyframes eidolonPanelIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.975);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .eidolonCardViewer:not(.inactive) .eidolonCardViewerPanel {
    animation: eidolonPanelIn 0.24s cubic-bezier(0.2, 0.78, 0.2, 1) both;
  }

  .eidolonCardViewerBody {
    gap: 6px;
  }

  .eidolonCardNav {
    min-width: 38px;
    min-height: 42px;
    font-size: 20px;
  }

  .eidolonRuleBookBody {
    grid-template-columns: 1fr;
  }

  #eidolonQuickDice {
    display: none;
  }

  .eidolonQuickAction {
    min-width: 44px;
    padding: 3px 5px;
    font-size: 11px;
  }
}

#eidolonScreen.eidolonReducedMotion *,
#eidolonScreen.eidolonReducedMotion *::before,
#eidolonScreen.eidolonReducedMotion *::after {
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}

/* --== Holder Fans / Compact Card Inspect ==-- */
.eidolonDeck.fanned {
  transform: translateY(8px) !important;
  z-index: 24 !important;
  filter: drop-shadow(0 0 12px rgba(176, 224, 255, 0.24));
}

.eidolonDeckStored {
  position: absolute;
  right: 7px;
  bottom: 9px;
  z-index: 6;
  padding: 2px 4px;
  color: #b0e0ff;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(176, 224, 255, 0.34);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.eidolonDeckStored:empty {
  display: none;
}

.eidolonDeckFan {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 20;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease 0s;
}

.eidolonDeck.fanned .eidolonDeckFan {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.15s;
}

.eidolonFanCard {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--fan-z, 1);
  width: clamp(58px, 5.8vw, 82px);
  aspect-ratio: 2 / 3;
  padding: 0;
  transform: translate(-50%, -50%) scale(0.68);
  transform-origin: 50% 82%;
  opacity: 0;
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 1px solid #8297a2;
  border-radius: 3px;
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.82);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.78, 0.2, 1),
    opacity 0.16s ease,
    filter 0.18s ease;
  transition-delay: 0s;
}

.eidolonDeck.fanned .eidolonFanCard {
  transform: translate(-50%, -50%)
    translate(var(--fan-x, 0px), var(--fan-y, 0px))
    rotate(var(--fan-rot, 0deg));
  opacity: 1;
  transition-delay: var(--fan-delay, 0ms);
}

.eidolonFanCard span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  padding: 3px 2px;
  overflow: hidden;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  font: inherit;
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}

@media (hover: hover) and (pointer: fine) {
  .eidolonDeck.fanned .eidolonFanCard:hover {
    z-index: 60;
    transform: translate(-50%, -50%)
      translate(var(--fan-x, 0px), calc(var(--fan-y, 0px) - 12px))
      rotate(0deg) scale(1.12);
    filter: drop-shadow(0 0 8px rgba(176, 224, 255, 0.7));
  }
}

.eidolonDeckFanEmpty {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 150px;
  padding: 7px 8px;
  color: #8fa2ad;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #465862;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.eidolonCardViewer {
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(2px);
}

.eidolonCardViewer .eidolonCardViewerPanel {
  width: min(390px, 94vw);
  max-height: min(86vh, 650px);
  gap: 8px;
  padding: 10px;
}

.eidolonCardViewer .eidolonCardViewerTop {
  font-size: 16px;
}

.eidolonCardViewer .eidolonCardViewerTop .eidolonButton {
  min-width: 76px;
  padding: 5px 8px;
  font-size: 13px;
}

.eidolonCardViewer .eidolonCardViewerBody {
  gap: 8px;
}

.eidolonCardViewer .eidolonCard {
  width: min(292px, 72vw);
}

.eidolonCardViewer.singleCard .eidolonCardNav,
.eidolonCardViewer.singleCard #eidolonCardCounter {
  display: none;
}

/* --== Hunt Dice Overlay ==-- */
#eidolonDiceOverlay {
  position: absolute;
  inset: 0;
  z-index: 97;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.28),
    rgba(0, 0, 0, 0) 46%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.16s ease;
}

#eidolonDiceOverlay.inactive {
  opacity: 0;
  visibility: hidden;
}

.eidolonDiceOverlayLabel,
.eidolonDiceOverlay.preRolling .eidolonDiceOverlayFace {
  animation: eidolonPreRollPulse 0.34s steps(2, end) infinite;
}

@keyframes eidolonPreRollPulse {
  0%,
  100% {
    transform: scale(0.96) rotate(-2deg);
    filter: brightness(0.9);
  }
  50% {
    transform: scale(1.06) rotate(2deg);
    filter: brightness(1.25);
  }
}

.eidolonDiceOverlaySub {
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(176, 224, 255, 0.48);
  text-align: center;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 4px #000;
}

.eidolonDiceOverlayLabel {
  font-size: clamp(18px, 2.2vw, 30px);
}

.eidolonDiceOverlayFace {
  min-width: 118px;
  padding: 14px 22px 10px;
  color: #ffdd55;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ffdd55;
  box-shadow: 0 0 24px rgba(255, 221, 85, 0.48);
  font-size: clamp(64px, 10vw, 132px);
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 221, 85, 0.5);
  transform: scale(0.94);
  transition:
    transform 0.18s cubic-bezier(0.22, 0.78, 0.2, 1),
    box-shadow 0.18s ease;
}

#eidolonDiceOverlay.settled .eidolonDiceOverlayFace {
  transform: scale(1.08);
  box-shadow: 0 0 38px rgba(255, 221, 85, 0.82);
}

.eidolonDiceOverlaySub {
  color: #b0e0ff;
  font-size: clamp(14px, 1.6vw, 21px);
}

/* --== Piece Quick Menu ==-- */
.eidolonPlayerPiece.menuToggleable {
  pointer-events: auto;
  cursor: pointer;
}

.eidolonPlayerPiece.menuToggleable .eidolonPlayerToken {
  pointer-events: none;
}

.eidolonPlayerPiece.pieceMenuOpen {
  z-index: 48;
  overflow: visible;
}

.eidolonPlayerPiece.pieceMenuOpen.current::before {
  inset: -3%;
  border-radius: 50%;
  opacity: 0.82;
  pointer-events: none;
}

.eidolonPlayerPiece.pieceMenuOpen::after {
  display: none;
}

.eidolonPlayerPiece.pieceMenuOpen .eidolonPlayerToken {
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.86));
}

.eidolonPieceQuickMenu {
  position: absolute;
  z-index: 60;
  width: clamp(174px, 16vw, 222px);
  min-height: clamp(76px, 7.2vw, 98px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px;
  color: #fff;
  background: rgba(2, 5, 7, 0.96);
  border: 1px solid #b0e0ff;
  border-radius: 3px;
  box-shadow:
    0 0 18px rgba(176, 224, 255, 0.25),
    0 0 28px rgba(0, 0, 0, 0.9);
  pointer-events: auto;
  white-space: nowrap;
  animation: eidolonPieceMenuOut 0.18s cubic-bezier(0.22, 0.78, 0.2, 1) both;
}

.eidolonPieceQuickMenu::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: #b0e0ff;
  box-shadow: 0 0 6px rgba(176, 224, 255, 0.55);
}

.eidolonPlayerPiece.pieceMenuLeft .eidolonPieceQuickMenu::before {
  left: auto;
  right: -8px;
}

@keyframes eidolonPieceMenuOut {
  from {
    opacity: 0;
    scale: 0.94;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.eidolonPieceQuickMenu.closing {
  pointer-events: none;
  animation: eidolonPieceMenuClose 0.16s cubic-bezier(0.4, 0, 0.8, 0.2) both;
}

@keyframes eidolonPieceMenuClose {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.92;
  }
}

.eidolonActionPending {
  opacity: 0.58 !important;
  pointer-events: none !important;
  filter: saturate(0.75);
}

.eidolonPieceQuickRoll {
  padding: 1px 3px 4px;
  color: #b0e0ff;
  font-size: clamp(10px, 0.82vw, 13px);
  text-align: center;
  border-bottom: 1px solid #34444d;
}

.eidolonPieceQuickActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  padding-top: 4px;
}

.eidolonPieceQuickAction,
.eidolonPieceQuickWaiting {
  min-width: 42px;
  padding: 3px 5px;
  color: #fff;
  background: #080b0d;
  border: 1px solid #657985;
  font: inherit;
  font-size: clamp(9px, 0.7vw, 11px);
  text-align: center;
}

.eidolonPieceQuickAction:not(:disabled) {
  border-color: #b0e0ff;
  cursor: pointer;
}

.eidolonPieceQuickAction:not(:disabled):hover {
  color: #000;
  background: #b0e0ff;
}

.eidolonPieceQuickAction:disabled {
  opacity: 0.62;
}

.eidolonPieceGoal {
  min-width: 0;
  margin-top: 4px;
  padding: 2px 4px 0;
  overflow: hidden;
  color: #ffdd55;
  border-top: 1px solid rgba(255, 221, 85, 0.35);
  font-size: clamp(9px, 0.7vw, 11px);
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px rgba(255, 221, 85, 0.35);
  pointer-events: none;
}

@media (max-width: 620px) {
  .eidolonPieceQuickMenu {
    width: min(176px, 58vw);
    min-height: 78px;
  }
}

.eidolonDeck.drawPending .eidolonDeckCard {
  translate: 0 -12px;
  scale: 1.025;
  filter: brightness(1.12) drop-shadow(0 0 12px rgba(176, 224, 255, 0.38));
}

.eidolonDeck.drawPending {
  pointer-events: none;
}

@media (max-width: 620px) {
  .eidolonSettingsInner {
    padding: 10px;
  }

  .eidolonSettingsBody {
    font-size: 15px;
  }

  .eidolonSettingRow {
    min-height: 50px;
    gap: 10px;
    padding: 9px 5px;
  }

  .eidolonSettingControl {
    flex-basis: 54%;
  }

  .eidolonSettingRow input[type="range"] {
    width: min(170px, 36vw);
  }

  .eidolonSettingRow output,
  .eidolonSettingStatus {
    font-size: 13px;
  }

  .eidolonFanCard {
    width: 58px;
  }
}