:root {
  --holo-color1: rgba(0, 231, 255, 0.7); /* 青系光 */
  --holo-color2: rgba(255, 0, 231, 0.7); /* ピンク系光 */
  --holo-color3: rgba(255, 255, 255, 0.9); /* 白光 */
  --card-bg: url("/img/noImage.jpg"); /* デフォルト画像 */
  --fill-color: #040712; /* デフォルトの余白色 */
  --star-holo: 0; /* 星型ホロ：1（オン）/0（オフ） */
  --diamond-holo: 0; /* 菱形ホロ：1（オン）/0（オフ） */
  --card-width: 400px; /* テスト用幅 */
  --card-height: 600px; /* テスト用高さ */
  --image-fit: contain; /* デフォルト画像フィット */
  --mask-foreground-star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><polygon points="50,10 61.8,38.2 90,38.2 66.5,55.9 76.4,84.1 50,68.2 23.6,84.1 33.5,55.9 10,38.2 38.2,38.2" fill="white"/></svg>');
  --mask-foreground-diamond: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77"><polygon points="38.5,3.5 73.5,38.5 38.5,73.5 3.5,38.5" fill="white"/></svg>'); /* 70%サイズ、余白3.5px */
}

.three-d-wrapper {
  perspective: 1000px;
  display: flex; /* 中央配置 */
  justify-content: center;
  align-items: center;
  /*height: 100vh; /* ビューポート全体 */
}

.card {
  position: relative;
  width: var(--card-width, 400px);
  height: var(--card-height, 600px);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background-color: var(--fill-color, #040712);
  background-image: var(--card-bg, url("/img/noImage.jpg"));
  background-size: var(--image-fit, contain);
  background-position: center;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
  transition: transform 0.15s ease;
  /* transition: transform 0.2s ease; */
  cursor: grab;
}

.card[data-image-fit="cover"] {
  background-color: transparent;
  background-image: var(--card-bg, url("/img/noImage.jpg"));
  background-size: cover;
}

.card:hover {
  transform: scale(1.1);
}

/* 前景ホロ（デフォルト：星型） */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* マージンなし */
  padding: 0; /* パディングなし */
  background: linear-gradient(45deg, transparent 30%, var(--holo-color1) 45%, var(--holo-color3) 50%, var(--holo-color2) 55%, transparent 70%),
    radial-gradient(circle at 50% 50%, var(--holo-color3) 0%, transparent 20px);
  background-size: 100px 100px, 100px 100px; /* 星型用 */
  background-position: calc(var(--mx, 0px) * 0.3) calc(var(--my, 0px) * 0.3), calc(var(--mx, 0px) * 0.3 + 50px) calc(var(--my, 0px) * 0.3 + 50px);
  background-repeat: repeat;
  mask-image: var(--mask-foreground-star); /* デフォルトは星型 */
  -webkit-mask-image: var(--mask-foreground-star);
  opacity: calc(0.8 * (var(--star-holo, 0) + var(--diamond-holo, 0))); /* 視認性向上 */
  mix-blend-mode: overlay;
  filter: blur(0.2px);
  transform: translateZ(5px);
  transition: background 0.1s ease, background-size 0.3s ease, opacity 0.3s ease, mask-image 0.3s ease, -webkit-mask-image 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* 星型ホロ（優先） */
.card[style*="--star-holo: 1"]::before {
  mask-image: var(--mask-foreground-star);
  -webkit-mask-image: var(--mask-foreground-star);
  background: linear-gradient(45deg, transparent 30%, var(--holo-color1) 45%, var(--holo-color3) 50%, var(--holo-color2) 55%, transparent 70%),
    radial-gradient(circle at 50% 50%, var(--holo-color3) 0%, transparent 20px);
  background-size: 100px 100px, 100px 100px; /* 星型は現状維持 */
  background-position: calc(var(--mx, 0px) * 0.3) calc(var(--my, 0px) * 0.3), calc(var(--mx, 0px) * 0.3 + 50px) calc(var(--my, 0px) * 0.3 + 50px) !important;
  background-repeat: repeat;
}

/* 菱形ホロ：星型と同じ挙動、70%サイズ、間隔10px */
.card[style*="--diamond-holo: 1"][style*="--star-holo: 0"]::before {
  mask-image: var(--mask-foreground-diamond);
  -webkit-mask-image: var(--mask-foreground-diamond);
  background: linear-gradient(45deg, transparent 30%, var(--holo-color1) 45%, var(--holo-color3) 50%, var(--holo-color2) 55%, transparent 70%),
    radial-gradient(circle at 50% 50%, var(--holo-color3) 0%, transparent 20px);
  background-size: 87px 87px, 87px 87px; /* 菱形77px＋間隔10px */
  background-position: calc(var(--mx, 0px) * 0.3) calc(var(--my, 0px) * 0.3), calc(var(--mx, 0px) * 0.3 + 50px) calc(var(--my, 0px) * 0.3 + 50px) !important;
  background-repeat: repeat; /* 密に敷き詰める */
}

/* カード全体のホロ（グラデーション＋スポット、形状なし） */
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* マージンなし */
  padding: 0; /* パディングなし */
  background: linear-gradient(45deg, transparent 30%, var(--holo-color1) 45%, var(--holo-color3) 50%, var(--holo-color2) 55%, transparent 70%);
  background-size: 100% 100%, 100% 100%;
  opacity: 0.5;
  mix-blend-mode: overlay;
  filter: blur(0.2px);
  transform: translateZ(5px);
  transition: background-position 0.1s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

/* スポットライト用の ::before */
.card-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 1) 15%, transparent 100px); /* サイズを100pxに */
  opacity: 0.9; /*0.8; /* スポットライトの強さを独立調整 */
  mix-blend-mode: screen; /* 光を強くするために screen を推奨 */
  filter: blur(8px); /* シャープな光（必要に応じて 0.2px などに） */
  transition: background-position 0.1s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 13; /* .card-overlay の上に配置 */
}

/* ホロ効果と回転オフ */
.card.holo-off::before,
.card.holo-off .card-overlay,
.card.holo-off .card-overlay::before {
  opacity: 0 !important; /* 優先順位を強化 */
}

.card.holo-off.rotated {
  transform: none;
}

.card.holo-off:hover {
  transform: none;
}

/* カード全体の回転 */
.card.rotated {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* 星型ホロの動き */
.card.rotated[style*="--star-holo: 1"]::before {
  background-position: calc(var(--mx, 0px) * 0.3) calc(var(--my, 0px) * 0.3), calc(var(--mx, 0px) * 0.3 + 50px) calc(var(--my, 0px) * 0.3 + 50px) !important;
}

/* 菱形ホロの動き */
.card.rotated[style*="--diamond-holo: 1"][style*="--star-holo: 0"]::before {
  background-position: calc(var(--mx, 0px) * 0.3) calc(var(--my, 0px) * 0.3), calc(var(--mx, 0px) * 0.3 + 50px) calc(var(--my, 0px) * 0.3 + 50px) !important;
}

/* カード全体のホロの動き */
.card.rotated .card-overlay {
  background-position: calc(var(--mx, 0px) * 3) calc(var(--my, 0px) * 3), var(--spot-x, 50%) var(--spot-y, 50%);
}

/* カード全体のホロの動き（スポットライトの位置） */
.card.rotated .card-overlay::before {
  background-position: var(--spot-x, 50%) var(--spot-y, 50%);
}

.card {
  will-change: transform;
}
.card-overlay,
.card-overlay::before {
  will-change: background-position;
}