/* ---- global ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;

  background-image: url("./assets/bg.gif");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(255,215,160,0.15), rgba(0,0,0,0.85) 70%),
    rgba(0,0,0,0.35);
}

.wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 40px; }

/* --- gold title --- */
.introText h1{
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: clamp(34px, 6vw, 66px);

  background: linear-gradient(180deg,#fff6c0 0%,#ffd36a 30%,#ffb700 55%,#b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 8px rgba(255,215,120,0.6),
    0 0 18px rgba(255,200,80,0.35),
    0 0 32px rgba(255,180,40,0.25);
}

.sub{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.18em;

  background: linear-gradient(180deg,#fff2cc,#ffd27d,#cfa34a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 6px rgba(255,210,120,0.4);
  opacity: 0.95;
}

/* ---- Intro ---- */
.intro{
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.introText{
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  animation: godFadeIn 1.8s ease-out both;
}

@keyframes godFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.98); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(-50%); filter: none; }
}

.intro.fadeout{
  animation: introFade 0.55s ease-out forwards;
}
@keyframes introFade{
  to{ opacity: 0; filter: blur(2px); transform: scale(1.01); }
}

/* ---- Gun video container (全画面) ---- */
.gunContainer {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
}

.gunContainer.isHidden {
  display: none !important;
}

.gunVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- ガチャを引くボタン ---- */
.gachaBtn {
  position: absolute;
  z-index: 10;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
  padding: 16px 32px;
  border: none;
  border-radius: 50px;
  
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffb700 25%,
    #ffa500 50%,
    #ffb700 75%,
    #ffd700 100%
  );
  background-size: 200% 200%;
  
  box-shadow:
    0 4px 15px rgba(255, 183, 0, 0.4),
    0 8px 30px rgba(255, 165, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  
  cursor: pointer;
  transition: all 0.3s ease;
  animation: gachaShine 3s ease-in-out infinite, gachaPulse 2s ease-in-out infinite;
}

/* スマホではボタンを非表示にし、スワイプヒントを表示 */
@media (max-width: 768px) and (pointer: coarse) {
  .gachaBtn {
    display: none;
  }
}

.gachaBtn:hover {
  transform: translateX(-50%) scale(1.08);
  box-shadow:
    0 6px 20px rgba(255, 183, 0, 0.5),
    0 12px 40px rgba(255, 165, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.gachaBtn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow:
    0 2px 10px rgba(255, 183, 0, 0.4),
    0 4px 20px rgba(255, 165, 0, 0.3),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gachaBtn__icon {
  font-size: 24px;
  animation: iconSpin 4s ease-in-out infinite;
}

.gachaBtn__text {
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: 18px;
  color: #1a0a00;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
}

/* ---- スワイプヒント（スマホ用） ---- */
.swipeHint {
  position: absolute;
  z-index: 10;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  
  color: rgba(255, 215, 120, 0.9);
  text-align: center;
}

@media (max-width: 768px) and (pointer: coarse) {
  .swipeHint {
    display: flex;
  }
}

.swipeHint__arrow {
  font-size: 32px;
  animation: swipeArrowBounce 1.5s ease-in-out infinite;
}

.swipeHint__text {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

@keyframes swipeArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-12px); opacity: 1; }
}

/* ---- スワイプフィードバック ---- */
.swipeFeedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 100;
  
  font-family: "Cinzel", serif;
  font-size: 48px;
  font-weight: 800;
  color: #ffd700;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 183, 0, 0.6),
    0 0 60px rgba(255, 165, 0, 0.4);
  
  pointer-events: none;
  animation: swipeFeedbackPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.swipeFeedback.fadeOut {
  animation: swipeFeedbackFade 0.3s ease-out forwards;
}

@keyframes swipeFeedbackPop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes swipeFeedbackFade {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

@keyframes gachaShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes gachaPulse {
  0%, 100% { 
    box-shadow:
      0 4px 15px rgba(255, 183, 0, 0.4),
      0 8px 30px rgba(255, 165, 0, 0.3),
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
  50% { 
    box-shadow:
      0 4px 25px rgba(255, 183, 0, 0.6),
      0 8px 50px rgba(255, 165, 0, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.4),
      inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
}

@keyframes iconSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
}

/* ---- stage / controls ---- */
.stage { margin-top: 10px; display: grid; gap: 14px; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }

.btn {
  appearance: none;
  border: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #ffffff;
  color: #000;
  font-weight: 800;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.chk { opacity: 0.85; display: inline-flex; gap: 8px; align-items: center; }

.history { display: grid; gap: 6px; font-size: 12px; opacity: 0.75; }
.history__item { padding: 6px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; }

.foot { margin-top: 18px; opacity: 0.6; text-align:center; }

/* ---- Card reveal zone ---- */
.cardReveal{
  display: grid;
  place-items: center;
  min-height: 460px;
}

/* ---- After controls (new) ---- */
.afterControls{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn.ghost{
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn.small{
  padding: 8px 12px;
  border-radius: 10px;
}
.btn.danger{
  background: rgba(255,60,60,0.92);
  color: #fff;
}

/* ---- Flip wrapper ---- */
.flipWrap{
  width: min(340px, 86vw);
  aspect-ratio: 2.5 / 3.5;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  position: relative;
}

.flip{
  width: 100%;
  height: 100%;
  position: relative;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.face{
  position: absolute;
  inset: 0;
  border-radius: 4.55% / 3.5%;
  overflow: hidden;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform: translateZ(2px);
  -webkit-transform: translateZ(2px);
}

.face.back{
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);

  background:
    radial-gradient(circle at 30% 20%, rgba(255,215,120,0.25), transparent 40%),
    linear-gradient(145deg, rgba(255,215,120,0.18), rgba(0,0,0,0.85));
  border: 1px solid rgba(255,215,120,0.35);
  box-shadow: 0px 18px 30px -14px rgba(0,0,0,0.85);
  display: grid;
  place-items: center;
  letter-spacing: 0.22em;
  font-weight: 900;
  font-family: "Cinzel", serif;
}

.face.front{
  transform: rotateY(180deg) translateZ(3px);
  -webkit-transform: rotateY(180deg) translateZ(3px);
}

.flipWrap.reveal .flip{
  animation: flipIn 0.85s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes flipIn{
  0%   { transform: rotateY(0deg) scale(0.98); }
  55%  { transform: rotateY(110deg) scale(1.02); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* ---- Holo card BASE STYLES ---- */
:root{
  --mx: 50%;
  --my: 50%;
  --o: 0;
  --rx: 0deg;
  --ry: 0deg;
  --posx: 50%;
  --posy: 50%;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0.5;
  --pointer-from-left: 0.5;
  --pointer-from-top: 0.5;
  --background-x: 50%;
  --background-y: 50%;
  --card-opacity: 1;
  
  /* Glitter and foil variables */
  --glittersize: 20px;
  --glitter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="2" cy="2" r="1" fill="white" opacity="0.8"/><circle cx="10" cy="8" r="1" fill="white" opacity="0.6"/><circle cx="18" cy="15" r="1" fill="white" opacity="0.7"/></svg>');
  --foil: linear-gradient(45deg, rgba(255,255,255,0.3), transparent);
  
  /* Sun pillar colors */
  --space: 5%;
  --angle: 133deg;
  --sunpillar-clr-1: rgba(255, 100, 200, 0.4);
  --sunpillar-clr-2: rgba(100, 200, 255, 0.4);
  --sunpillar-clr-3: rgba(255, 255, 100, 0.4);
  --sunpillar-clr-4: rgba(100, 255, 200, 0.4);
  --sunpillar-clr-5: rgba(200, 100, 255, 0.4);
  --sunpillar-clr-6: rgba(255, 200, 100, 0.4);
}

.card{
  --radius: 4.55% / 3.5%;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0.1px);
  transform-style: preserve-3d;
  will-change: transform;
}

.card__translater{
  width: 100%;
  height: 100%;
  perspective: 700px;
  display: grid;
}

.card__rotator{
  border: 0;
  padding: 0;
  cursor: grab;
  width: 100%;
  height: 100%;
  display: grid;
  border-radius: var(--radius);
  outline: none;
  background: transparent;
  position: relative;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transform: translateZ(0) rotateY(var(--rx)) rotateX(var(--ry));
  -webkit-transform: translateZ(0) rotateY(var(--rx)) rotateX(var(--ry));

  box-shadow: 0px 18px 30px -14px rgba(0,0,0,0.85);
}

.card.active .card__rotator{
  box-shadow:
    0 0 18px 2px rgba(120, 200, 255, 0.35),
    0px 18px 30px -14px rgba(0,0,0,0.85);
}

.card__front{
  width: 100%;
  height: 100%;
  display: grid;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
}

.card__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0.1px);
  position: relative;
  z-index: 1;
}

.card__shine,
.card__glare{
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 2;
}

/* オーバーレイ画像（存在する場合） */
.card__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
  transform: translateZ(2px);
}

/* ---- DEFAULT HOLO EFFECT (Common/Uncommon) ---- */
.card__glare{
  background:
    radial-gradient(
      circle at var(--posx) var(--posy),
      rgba(255,255,255, calc(0.35 * var(--o))) 0%,
      rgba(255,255,255, calc(0.12 * var(--o))) 20%,
      rgba(0,0,0, 0) 55%
    );
  mix-blend-mode: overlay;
}

.card__shine{
  opacity: calc(0.9 * var(--o));
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 0, 160, 0.25) 0%,
      rgba(0, 255, 255, 0.20) 12%,
      rgba(255, 255, 0, 0.18) 24%,
      rgba(255, 0, 160, 0.25) 36%
    );
  background-size: 220% 220%;
  background-position: var(--mx) var(--my);
  filter: saturate(1.35) contrast(1.1);
  mix-blend-mode: color-dodge;
}

.card__shine:before,
.card__shine:after,
.card__glare:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}


/* ===============================================
   REVERSE HOLO EFFECT
   =============================================== */

.card[data-rarity="reverse holo"] {
  --foil-brightness: 0.55;
}

.card[data-rarity="reverse holo"] .card__shine {
  background-image: 
    radial-gradient( 
      circle at var(--pointer-x) var(--pointer-y),
      #fff 5%, 
      #000 50%, 
      #fff 80% 
    ), 
    linear-gradient( 
      -45deg, 
      #000 15%, 
      #fff, 
      #000 85% 
    ), 
    var(--foil);

  background-blend-mode: soft-light, difference;
  background-size: 120% 120%, 200% 200%, cover;
  background-position: center center, calc( (100% * var(--pointer-from-left))) calc( (100% * var(--pointer-from-top))) , center center;
  
  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;
  opacity: calc( (1.5 * var(--card-opacity)) - var(--pointer-from-center));
}

.card[data-rarity="reverse holo"] .card__glare {
  opacity: var(--card-opacity);
  background-image: 
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.8) 10%,
      hsla(0, 0%, 100%, 0.5) 20%,
      hsla(0, 0%, 0%, 0.75) 90%
    );
  filter: brightness(.7) contrast(1.5);
}

.card[data-rarity="reverse holo"] .card__glare:after {
  opacity: var(--card-opacity);
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 10%, 
      hsla(0, 0%, 100%, 0.5) 20%, 
      hsla(0, 0%, 0%, 0.5) 120% 
    );
  filter: brightness(1) contrast(1.5);
}


/* ===============================================
   SHINY RARE (HOLO) EFFECT
   =============================================== */

.card[data-rarity="shiny rare"] .card__shine,
.card[data-rarity="shiny rare"] .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
    ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), 
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  filter: brightness(calc((var(--pointer-from-center)*0.4) + .4)) contrast(1.4) saturate(2.25);
}

.card[data-rarity="shiny rare"] .card__shine:after {
  background-position: 
    center center, 
    0% var(--background-y), 
    calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  filter: brightness(calc((var(--pointer-from-center)*.4) + .8)) contrast(1.5) saturate(1.25);
  mix-blend-mode: exclusion;
}

.card[data-rarity="shiny rare"] .card__shine:before {
  -webkit-mask-image: none;
  mask-image: none;
  
  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsla(0, 0%, 0%, 0) 40% 
    );
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  opacity: 0.75;
  z-index: 1;
}

.card[data-rarity="shiny rare"] .card__glare {
  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
    hsl(0, 0%, 100%) 0%, 
    hsl(320, 5%, 15%) 150%
    );
  background-size: cover;
  background-position: center center;
  mix-blend-mode: multiply;
  filter: brightness(1.2) contrast(1) saturate(.7);
  opacity: calc( var(--card-opacity) * var(--pointer-from-center) );
}


/* ===============================================
   SHINY VMAX EFFECT
   =============================================== */

.card[data-rarity="shiny vmax"] .card__shine {
  --imgsize: cover;
  --angle: -30deg;

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    var(--glitter),
    var(--glitter),
    linear-gradient( var(--angle), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    ),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 10%, 1) 10%, 
      hsla(206, 5%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), 400% 400%, cover;
  background-position: 40% 45%, 55% 55%, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ), center center;
  background-blend-mode: soft-light, overlay, color-burn;
  filter: brightness(1) contrast(1) saturate(.85);
}

.card[data-rarity="shiny vmax"] .card__shine:before {
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 91%, 0.95) 10%, 
      hsla(206, 5%, 68%, 0.5) 50%, 
      hsl(0, 0%, 0%) 120% 
    );

  background-size: var(--imgsize), cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;
  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(.4);
  opacity: 0.35;
}

.card[data-rarity="shiny vmax"] .card__shine:after {
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    repeating-linear-gradient( 
      calc( var(--angle) ), 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    );

  background-size: 400% 800%;
  background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 );
  filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1);
  mix-blend-mode: hue;
}

.card[data-rarity="shiny vmax"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 90%, 0.45) 0%, 
      hsla(206, 5%, 30%, 0.45) 45%, 
      hsla(0, 0%, 0%, .33) 120% 
    );
  filter: brightness(1) contrast(1.25);
}

.card[data-rarity="shiny vmax"] .card__glare:after {

  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 90%, 0.75) 0%, 
      hsla(206, 5%, 30%, 0.65) 45%, 
      hsla(0, 0%, 0%, .75) 100% 
    );

  filter: brightness(1) contrast(1.25);
  mix-blend-mode: overlay;
  opacity: 1;
}


/* ===============================================
   AMAZING RARE EFFECT
   =============================================== */

.card[data-rarity="amazing rare"] .card__shine {
  background-image:
    var(--glitter),
    var(--glitter), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(150, 20%, 10%, 1) 10%, 
      hsla(177, 22%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover;
  background-position: 40% 45%, 55% 55%, center center;
  background-blend-mode: soft-light, color-burn;
  filter: brightness(1) contrast(1) saturate(.9);
}

.card[data-rarity="amazing rare"] .card__shine:before {
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(50, 20%, 90%, 0.95) 10%, 
      rgba(181, 139, 164, 0.5) 50%, 
      hsl(0, 0%, 0%) 60% 
    );

  background-size: cover, cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;
  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 0.5;
}

.card[data-rarity="amazing rare"] .card__shine:after {
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    repeating-linear-gradient( 
      calc( var(--angle) ), 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    );

  background-size: 400% 800%;
  background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 );
  filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1);
  mix-blend-mode: saturation;
}

.card[data-rarity="amazing rare"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(50, 20%, 90%, 0.45) 0%, 
      hsla(150, 20%, 30%, 0.45) 45%, 
      hsla(0, 0%, 0%, .9) 120% 
    );
  filter: brightness(.9) contrast(2);
}

.card[data-rarity="amazing rare"] .card__glare:after {

  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(50, 20%, 90%, 0.75) 0%, 
      hsla(150, 20%, 30%, 0.65) 45%, 
      hsla(0, 0%, 0%, 1) 90% 
    );

  filter: brightness(1) contrast(1.5);
  mix-blend-mode: overlay;
  opacity: 1;
}


/* ---- Card metadata (hidden by default) ---- */
.card__meta{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  transform: translateZ(20px);
  z-index: 5;
  display: none !important; /* Hidden by default */
}
.card__name{ font-weight: 800; letter-spacing: 0.02em; }
.card__rarity{ font-weight: 900; opacity: 0.9; }

/* ---- modal ---- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position: relative;
  width: min(920px, 92vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,215,120,0.25);
  background: rgba(10,10,16,0.88);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding: 14px 14px 12px;
}
.modal__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  background: rgba(10,10,16,0.88);
  backdrop-filter: blur(6px);
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.modal__title{
  margin: 0;
  font-family: "Cinzel", serif;
  letter-spacing: 0.14em;
  font-size: 16px;
  background: linear-gradient(180deg,#fff6c0 0%,#ffd36a 35%,#ffb700 60%,#b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal__foot{
  padding: 12px 6px 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: flex-end;
}
.collectionGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px 6px;
}
.collectItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.collectItem img{
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  object-fit: cover;
  display: block;
}
.collectMeta{
  display: grid;
  gap: 4px;
  padding: 10px 10px 12px;
}
.collectName{
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 13px;
}
.collectRow{
  display: flex;
  justify-content: space-between;
  opacity: 0.88;
  font-size: 12px;
}

/* hidden 属性が付いている要素は強制的に非表示 */
[hidden]{
  display: none !important;
}

/*

  SECRET RARE (GOLD)

*/




/*

  SHINE LAYERS

*/

.card[data-rarity="rare secret"] .card__shine,
.card[data-set="swshp"][data-number="swsh145"] .card__shine {

  --shift: 1px;
  --imgsize: cover;

  background-image:
    var(--glitter), 
    var(--glitter), 
    conic-gradient( 
      var(--sunpillar-clr-4), 
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6), 
      var(--sunpillar-clr-1), 
      var(--sunpillar-clr-4) 
    ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(150, 00%, 0%, .98) 10%, 
      hsla(0, 0%, 95%, .15) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, soft-light, overlay;  /* hard-lightを削除 */
  mix-blend-mode: screen;  /* color-dodgeから変更 */
  filter: brightness(calc( 0.35 + (var(--pointer-from-center) * 0.2) )) contrast(1) saturate(2);  /* 明るさを抑える */

}

.card[data-rarity="rare secret"] .card__shine:before,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil), 
    linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(10, 20%, 90%, 0.95) 10%, 
      hsl(0, 0%, 0%) 70% 
    );

  background-size: var(--imgsize), cover, cover;
  background-position: center center, center center, center center;
  background-blend-mode: soft-light, multiply;  /* hard-lightを変更 */

  mix-blend-mode: lighten;
  filter: brightness(0.95) contrast(1.15) saturate(0.5);  /* 明るさを抑える */
  opacity: .5;  /* 不透明度を下げる */

}

.card[data-rarity="rare secret"] .card__shine:after,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: var(--glitter);
  background-size: var(--glittersize) var(--glittersize);
  background-position: calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) + var(--shift));

  filter: brightness(calc((var(--pointer-from-center)*0.6) + 0.6)) contrast(1.5);
  mix-blend-mode: overlay;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare secret"] .card__glare,
.card[data-set="swshp"][data-number="swsh145"] .card__glare {
	
	background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 8%, 80%, 0.3) 0%, 
      hsl(22, 15%, 12%) 180%
    );

	filter: brightness(1.3) contrast(1.5);
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


.card[data-rarity="rare secret"] .card__shine,
.card:not(.masked)[data-set="swshp"][data-number="swsh145"] .card__shine {

  --foil: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); 
  --imgsize: 33%;
  
  filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75);

}


























/*

  V STAR

*/



/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo vstar"] .card__shine,
.card[data-rarity="rare holo vstar"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
    ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);
  
  filter: brightness(calc((var(--pointer-from-center) * .75) + .25)) contrast(2) saturate(1.25);

}

.card[data-rarity="rare holo vstar"] .card__shine:after {

  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5);
  mix-blend-mode: exclusion;

}

.card[data-rarity="rare holo vstar"] .card__shine::before {

  content: "";
  background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(190, 7%, 80%, 0.75) 0%, hsla(260, 7%, 50%, 0.25) 45%, hsl(310, 7%, 50%) 120% );
  mix-blend-mode: hard-light;
  z-index: 2;
  opacity: 0.8;
  
}






/*

  GLARE LAYERS

*/


.card[data-rarity="rare holo vstar"] .card__glare {
  
  filter: brightness(.7) contrast(2);

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(195, 90%, 90%) 5%, 
      hsl(300, 3%, 60%) 60%, 
      hsl(350, 0%, 15%) 150% 
    );
  
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity)*(var(--pointer-from-center)*.75));

}










/*

  NO MASK

*/


.card[data-rarity="rare holo vstar"] .card__shine,
.card[data-rarity="rare holo vstar"] .card__shine:after {

  --foil: linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.15) 50%, transparent 80%); 
  --imgsize: 18% 15%;

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75);

}

.card[data-rarity="rare holo vstar"] .card__shine:after {

  filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5);

}


.card[data-rarity="rare holo vstar"] .card__glare {
  
  filter: brightness(.55) contrast(2);

}/*

  SHINY RARE (VMAX)

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare shiny vmax"] .card__shine {

  --imgsize: cover;
  --angle: -30deg;

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    var(--glitter),
    var(--glitter),
    linear-gradient( var(--angle), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    ),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 10%, 1) 10%, 
      hsla(206, 5%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), 400% 400%, cover;
  background-position: 40% 45%, 55% 55%, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ), center center;
  background-blend-mode: soft-light, overlay, color-burn;
  filter: brightness(1) contrast(1) saturate(.85);

}

.card[data-rarity="rare shiny vmax"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 91%, 0.95) 10%, 
      hsla(206, 5%, 68%, 0.5) 50%, 
      hsl(0, 0%, 0%) 120% 
    );

  background-size: var(--imgsize), cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;

  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(.4);
  opacity: 0.35;

}

.card[data-rarity="rare shiny vmax"] .card__shine:after {

  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    repeating-linear-gradient( 
      calc( var(--angle) ), 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    );

  background-size: 400% 800%;
  background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 );
  filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1);
  mix-blend-mode: hue;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare shiny vmax"] .card__glare {
	
	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(248, 5%, 90%, 0.45) 0%, 
			hsla(206, 5%, 30%, 0.45) 45%, 
			hsla(0, 0%, 0%, .33) 120% 
		);

	filter: brightness(1) contrast(1.25);

}

.card[data-rarity="rare shiny vmax"] .card__glare:after {
	
  content: "";

	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(248, 5%, 90%, 0.75) 0%, 
			hsla(206, 5%, 30%, 0.65) 45%, 
			hsla(0, 0%, 0%, .75) 100% 
		);

  filter: brightness(1) contrast(1.25);
  mix-blend-mode: overlay;
	opacity: 1;

}










/* ===============================================
   ENHANCED HOLOGRAPHIC EFFECTS WITH TEXTURES
   =============================================== */

/* グローバルテクスチャ変数の定義 */
:root {
  --texture-galaxy: url('./assets/galaxy-source.png');
  --texture-cosmos: url('./assets/cosmos.png');
  --texture-cosmos-trans: url('./assets/cosmos-middle-trans.png');
  --texture-wave: url('./assets/wave.png');
  --texture-vmax: url('./assets/vmaxbg.jpg');
}

/* ===============================================
   SECRET RARE (SPECIAL) - ギャラクシーテクスチャ（グリッター強化版・光度調整）
   =============================================== */

/* Secret Rare専用の強化グリッター */
.card[data-rarity="rare secret"] {
  --glittersize-secret: 15px;  /* より小さく密集したグリッター */
  --glitter-secret: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><circle cx="2" cy="2" r="1.2" fill="white" opacity="0.95"/><circle cx="7" cy="5" r="0.8" fill="white" opacity="0.85"/><circle cx="12" cy="9" r="1" fill="white" opacity="0.9"/><circle cx="4" cy="11" r="0.7" fill="white" opacity="0.8"/><circle cx="10" cy="13" r="0.9" fill="white" opacity="0.85"/><circle cx="13" cy="3" r="0.6" fill="gold" opacity="0.7"/></svg>');
}

.card[data-rarity="rare secret"] .card__shine {
  background-image:
    var(--texture-galaxy),
    var(--glitter-secret),
    var(--glitter-secret), 
    var(--glitter-secret),  /* 3層のグリッター */
    conic-gradient( 
      var(--sunpillar-clr-4), 
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6), 
      var(--sunpillar-clr-1), 
      var(--sunpillar-clr-4) 
    ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 80%, 70%, .25) 0%,    /* 明るさを抑える */
      hsla(45, 60%, 45%, .12) 30%, 
      hsla(150, 0%, 20%, .92) 60%, 
      hsla(0, 0%, 5%, .98) 100% 
    );

  background-size: 
    200% 200%, 
    var(--glittersize-secret) var(--glittersize-secret),
    var(--glittersize-secret) var(--glittersize-secret),
    var(--glittersize-secret) var(--glittersize-secret),
    cover, 
    cover;
    
  background-position: 
    var(--background-x) var(--background-y),
    42% 43%, 
    58% 57%,
    50% 50%, 
    center center, 
    center center;
    
  background-blend-mode: screen, screen, overlay, overlay, overlay;  /* hard-lightをoverlayに */
  mix-blend-mode: screen;  /* color-dodgeをscreenに変更 - 柔らかい光 */
  filter: brightness(calc( 0.55 + (var(--pointer-from-center) * 0.25) )) contrast(1.2) saturate(1.9);  /* 明るさとコントラストを抑える */
}

.card[data-rarity="rare secret"] .card__shine:before {
  background-image:
    var(--glitter-secret),  /* 追加のグリッター層 */
    var(--texture-cosmos),
    linear-gradient( 45deg, 
      hsl(46, 90%, 55%), 
      hsl(52, 95%, 68%),
      hsl(46, 90%, 55%)
    ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 80%, 85%, 0.8) 0%,   /* 明るさを少し抑える */
      hsla(45, 60%, 65%, 0.5) 40%, 
      hsl(0, 0%, 0%) 80% 
    );

  background-size: 
    var(--glittersize-secret) var(--glittersize-secret),
    150% 150%, 
    cover, 
    cover;
    
  background-position: 
    46% 48%,
    calc(var(--background-x) * 1.5) calc(var(--background-y) * 1.5),
    center center, 
    center center;
    
  background-blend-mode: screen, overlay, soft-light, multiply;  /* hard-lightをsoft-lightに */

  mix-blend-mode: lighten;
  filter: brightness(1.3) contrast(1.3) saturate(0.8);  /* 明るさを抑える */
  opacity: .75;  /* 不透明度を下げる */
}

/* Secret Rare専用の追加のキラキラレイヤー */
.card[data-rarity="rare secret"] .card__shine:after {
  content: "";
  position: absolute;
  inset: 0;
  
  background-image: 
    var(--glitter-secret),
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      hsla(45, 90%, 80%, 0.4) 0%,   /* 明るさと不透明度を抑える */
      hsla(45, 70%, 65%, 0.2) 20%,
      transparent 50%
    );
    
  background-size: 
    var(--glittersize-secret) var(--glittersize-secret),
    150% 150%;
    
  background-position:
    52% 54%,
    var(--pointer-x) var(--pointer-y);
    
  mix-blend-mode: screen;
  opacity: calc(0.5 + (var(--pointer-from-center) * 0.2));  /* 不透明度を抑える */
  filter: brightness(1.4);  /* 明るさを抑える */
}

/* ===============================================
   SHINY VMAX (COLONEL) - VMAXテクスチャ（縮小・パターン化）
   =============================================== */

.card[data-rarity="rare shiny vmax"] .card__shine {
  background-image:
    var(--texture-vmax),
    var(--glitter),
    var(--glitter),
    linear-gradient( var(--angle), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    ),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 10%, 1) 10%, 
      hsla(206, 5%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: 
    20% 20%,  /* vmaxパターンをさらに小さく */
    var(--glittersize) var(--glittersize), 
    var(--glittersize) var(--glittersize), 
    400% 400%, 
    cover;
    
  background-position: 
    calc(50% + (var(--background-x) - 50%) * 0.4) calc(50% + (var(--background-y) - 50%) * 0.4),
    40% 45%, 
    55% 55%, 
    calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ), 
    center center;
    
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, soft-light, overlay, color-burn;
  filter: brightness(1.1) contrast(1.1) saturate(.95);
}

.card[data-rarity="rare shiny vmax"] .card__shine:before {
  background-image:
    var(--texture-cosmos-trans),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 91%, 0.95) 10%, 
      hsla(206, 5%, 68%, 0.5) 50%, 
      hsl(0, 0%, 0%) 120% 
    );

  background-size: 160% 160%, cover;
  background-position: 
    calc(var(--background-x) * 1.8) calc(var(--background-y) * 1.8),
    center center;
  background-blend-mode: screen, color-burn;

  mix-blend-mode: lighten;
  filter: brightness(1.2) contrast(1.2) saturate(.6);
  opacity: 0.45;
}

/* ===============================================
   V-STAR (LIEUTENANT COLONEL) - ウェーブテクスチャ（縮小・パターン化）
   =============================================== */

.card[data-rarity="rare holo vstar"] .card__shine {
  background-image:
    var(--texture-wave),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
    ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-blend-mode: overlay, soft-light, hue, hard-light;
  background-size: 
    15% 15%,  /* waveパターンをさらに小さく */
    200% 700%, 
    300% 100%, 
    200% 100%;
    
  background-position: 
    calc(50% + (var(--background-x) - 50%) * 0.5) calc(50% + (var(--background-y) - 50%) * 0.5),
    0% var(--background-y), 
    var(--background-x) var(--background-y), 
    var(--background-x) var(--background-y);
  
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  filter: brightness(calc((var(--pointer-from-center) * .85) + .35)) contrast(2.2) saturate(1.4);
}

.card[data-rarity="rare holo vstar"] .card__shine:after {
  background-image:
    var(--texture-cosmos),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
    ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-size: 
    30% 30%,
    200% 400%, 
    195% 100%, 
    200% 100%;
    
  background-position: 
    calc(50% - (var(--background-x) - 50%) * 0.5) calc(50% - (var(--background-y) - 50%) * 0.5),
    0% var(--background-y), 
    calc( var(--background-x) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  filter: brightness(calc((var(--pointer-from-center) * .85) + .6)) contrast(1.7) saturate(1.7);
  mix-blend-mode: exclusion;
}

/* ===============================================
   強化されたGLARE効果
   =============================================== */

.card[data-rarity="rare secret"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 85%, 78%, 0.45) 0%,      /* 明るさと不透明度を抑える */
      hsla(45, 75%, 65%, 0.35) 15%,     
      hsla(45, 60%, 52%, 0.25) 30%,     
      hsla(40, 35%, 38%, 0.15) 50%,      
      hsl(22, 15%, 12%) 100%            
    );
  filter: brightness(1.25) contrast(1.5);  /* 明るさを抑える */
  mix-blend-mode: soft-light;  /* hard-lightをsoft-lightに変更 */
  opacity: 0.8;  /* 不透明度を下げる */
}

/* Secret Rare専用の追加グレア層 */
.card[data-rarity="rare secret"] .card__glare:after {
  content: "";
  position: absolute;
  inset: 0;
  
  background-image: 
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      hsla(45, 90%, 85%, 0.5) 0%,   /* 不透明度を抑える */
      hsla(45, 80%, 72%, 0.25) 10%,
      transparent 30%
    );
    
  mix-blend-mode: screen;
  opacity: calc(0.35 + (var(--pointer-from-center) * 0.25));  /* 不透明度を大幅に抑える */
  filter: blur(15px) brightness(1.4);  /* 明るさを抑える */
}

.card[data-rarity="rare shiny vmax"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(280, 60%, 85%, 0.5) 0%,
      hsla(200, 50%, 70%, 0.4) 20%, 
      hsla(248, 5%, 50%, 0.3) 45%, 
      hsla(0, 0%, 0%, .4) 120% 
    );
  filter: brightness(1.2) contrast(1.4);
}

.card[data-rarity="rare holo vstar"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(195, 95%, 92%) 5%,
      hsl(180, 80%, 75%) 25%, 
      hsl(300, 3%, 60%) 60%, 
      hsl(350, 0%, 15%) 150% 
    );
  filter: brightness(.85) contrast(2.2);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity)*(var(--pointer-from-center)*.85));
}

/* ===============================================
   アニメーション強化
   =============================================== */

.card[data-rarity="rare secret"] .card__shine,
.card[data-rarity="rare shiny vmax"] .card__shine,
.card[data-rarity="rare holo vstar"] .card__shine {
  transition: all 0.1s ease-out;
}

.card.active[data-rarity="rare secret"],
.card.active[data-rarity="rare shiny vmax"],
.card.active[data-rarity="rare holo vstar"] {
  transform: scale(1.02);
  transition: transform 0.3s ease-out;
}



/* ===============================================
   パターンサイズのカスタマイズガイド
   =============================================== */

/*
  waveパターン (V-STAR) とvmaxパターン (Shiny VMAX) のサイズ調整:
  
  現在の設定:
  - wave: 15% 15% (細かいパターン)
  - vmax: 20% 20% (中サイズパターン)
  
  サイズオプション:
  - 10% 10% = 非常に細かい、密集したパターン
  - 15% 15% = 細かいパターン (現在のwave)
  - 20% 20% = 中サイズパターン (現在のvmax)
  - 25% 25% = やや大きいパターン
  - 30% 30% = 大きいパターン
  
  変更方法:
  1. 上記の該当セクションを探す
  2. background-size の最初の値を変更
  3. Cmd+Shift+R でリロード
*/

/* より細かいパターンを好む場合は、以下のコメントを外してください */
/*
.card[data-rarity="rare holo vstar"] .card__shine {
  background-size: 
    10% 10%,  !* 超細かいwave *!
    200% 700%, 
    300% 100%, 
    200% 100%;
}

.card[data-rarity="rare shiny vmax"] .card__shine {
  background-size: 
    12% 12%,  !* 超細かいvmax *!
    var(--glittersize) var(--glittersize), 
    var(--glittersize) var(--glittersize), 
    400% 400%, 
    cover;
}
*/

/* より大きいパターンを好む場合は、以下のコメントを外してください */
/*
.card[data-rarity="rare holo vstar"] .card__shine {
  background-size: 
    30% 30%,  !* 大きいwave *!
    200% 700%, 
    300% 100%, 
    200% 100%;
}

.card[data-rarity="rare shiny vmax"] .card__shine {
  background-size: 
    35% 35%,  !* 大きいvmax *!
    var(--glittersize) var(--glittersize), 
    var(--glittersize) var(--glittersize), 
    400% 400%, 
    cover;
}
*/


/* ===============================================
   テキストオーバーレイレイヤー
   =============================================== */

.card__text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 10;  /* shineとglareの上に配置 */
  
  /* エフェクトの影響を受けないように */
  mix-blend-mode: normal;
  
  /* 軽いドロップシャドウで立体感を追加（オプション） */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* テキストオーバーレイはホロエフェクトの上に表示されるべきなので、
   z-indexを適切に設定 */

.card__front {
  position: relative;
}

.card__image {
  position: relative;
  z-index: 1;
}

.card__shine {
  z-index: 2;
}

.card__glare {
  z-index: 3;
}

.card__text-overlay {
  z-index: 10;  /* 全てのエフェクトの上 */
}

.card__meta {
  z-index: 11;  /* テキストオーバーレイの上 */
}

/* テキストオーバーレイにもマウス追従効果を適用したい場合（オプション） */
.card.active .card__text-overlay {
  /* 必要に応じてエフェクトを追加 */
}


/* ===============================================
   オーバーレイ画像レイヤー
   エフェクトの上に表示される追加画像
   =============================================== */

.card__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 10;  /* shineとglareより上に配置 */
  transform: translateZ(30px);  /* 3D空間で前面に */
  
  /* オーバーレイ画像も3D回転に追従 */
  transform-style: preserve-3d;
}

/* カードのレイヤー順序の明確化 */
.card__front {
  position: relative;
  transform-style: preserve-3d;
}

.card__image {
  position: relative;
  z-index: 1;  /* 基本画像 */
  transform: translateZ(0px);
}

.card__shine {
  position: absolute;
  inset: 0;
  z-index: 5;  /* エフェクトレイヤー1 */
  transform: translateZ(10px);
}

.card__glare {
  position: absolute;
  inset: 0;
  z-index: 6;  /* エフェクトレイヤー2 */
  transform: translateZ(15px);
}

.card__overlay {
  /* 上記で定義済み */
  z-index: 10;  /* オーバーレイ画像（最前面） */
  transform: translateZ(30px);
}

.card__meta {
  position: relative;
  z-index: 11;  /* メタ情報（一番上） */
  transform: translateZ(40px);
}

/* オーバーレイ画像にもホロエフェクトの動きを適用 */
.card.active .card__overlay {
  transition: transform 0.1s ease-out;
}

/* オーバーレイ画像が3D回転に自然に追従するようにする */
.card__rotator:hover .card__overlay {
  transform: translateZ(30px);
}


/* ===============================================
   全レアリティ共通の動的アニメーション
   =============================================== */

/* カードがアクティブな時のさらなる輝き強化 */
.card.active[data-rarity="rare secret"] .card__shine {
  filter: brightness(calc( 0.6 + (var(--pointer-from-center) * 0.3) )) contrast(1.25) saturate(2.0);
  animation: secretGlow 2.5s ease-in-out infinite;
}

.card.active[data-rarity="rare shiny vmax"] .card__shine {
  filter: brightness(1.15) contrast(1.15) saturate(1.05);
  animation: vmaxGlow 3s ease-in-out infinite;
}

.card.active[data-rarity="rare holo vstar"] .card__shine {
  filter: brightness(calc((var(--pointer-from-center) * .9) + .4)) contrast(2.3) saturate(1.5);
  animation: vstarGlow 2.8s ease-in-out infinite;
}

/* Secret Rareのパルス効果（控えめ） */
@keyframes secretGlow {
  0%, 100% {
    filter: brightness(calc( 0.6 + (var(--pointer-from-center) * 0.3) )) contrast(1.25) saturate(2.0);
  }
  50% {
    filter: brightness(calc( 0.63 + (var(--pointer-from-center) * 0.32) )) contrast(1.28) saturate(2.1);
  }
}

/* Shiny VMAXの虹色シフト */
@keyframes vmaxGlow {
  0%, 100% {
    filter: brightness(1.15) contrast(1.15) saturate(1.05) hue-rotate(0deg);
  }
  33% {
    filter: brightness(1.18) contrast(1.17) saturate(1.08) hue-rotate(5deg);
  }
  66% {
    filter: brightness(1.16) contrast(1.16) saturate(1.06) hue-rotate(-5deg);
  }
}

/* V-STARのシルバーシマー */
@keyframes vstarGlow {
  0%, 100% {
    filter: brightness(calc((var(--pointer-from-center) * .9) + .4)) contrast(2.3) saturate(1.5);
  }
  50% {
    filter: brightness(calc((var(--pointer-from-center) * .95) + .42)) contrast(2.4) saturate(1.55);
  }
}

/* グリッターのシマー効果（全レアリティ） */
.card[data-rarity="rare secret"] .card__shine,
.card[data-rarity="rare shiny vmax"] .card__shine,
.card[data-rarity="rare holo vstar"] .card__shine {
  animation: glitterShimmer 4s ease-in-out infinite;
}

@keyframes glitterShimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.98;
  }
}

/* ホバー時のエフェクト（全レアリティ） */
.card[data-rarity="rare secret"]:hover {
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4))
          drop-shadow(0 0 30px rgba(255, 215, 0, 0.2));
}

.card[data-rarity="rare shiny vmax"]:hover {
  filter: drop-shadow(0 0 15px rgba(200, 150, 255, 0.4))
          drop-shadow(0 0 30px rgba(150, 200, 255, 0.2));
}

.card[data-rarity="rare holo vstar"]:hover {
  filter: drop-shadow(0 0 15px rgba(150, 220, 255, 0.4))
          drop-shadow(0 0 30px rgba(180, 200, 255, 0.2));
}

/* コレクション内のカードにはエフェクトアニメーションは適用しない */
/* エフェクトなしのシンプルな表示 */


/* ===============================================
   コレクション内のホロカード表示調整
   =============================================== */

/* コレクション内のカードのサイズ調整 */
.collectItem .card {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.collectItem .card__translater {
  aspect-ratio: 2.5 / 3.5;
}

.collectItem .card__rotator {
  width: 100%;
  height: 100%;
}

.collectItem .card__front {
  width: 100%;
  height: 100%;
}

.collectItem .card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コレクション内のカードメタデータ位置調整 */
.collectItem .card__meta {
  display: block !important;
  font-size: 11px;
  padding: 6px 8px;
  position: relative;
  z-index: 1;
}

/* エフェクトなしカード: シンプルな表示 */
.card--no-effect {
  /* エフェクト用のCSS変数は不要 */
}

/* エフェクトなしカードのrotatorは通常の表示 */
.card--no-effect .card__rotator {
  transform: none !important;
  box-shadow: 0px 10px 20px -8px rgba(0,0,0,0.6);
}

/* エフェクトなしカードにはshineとglareが存在しない */
.card--no-effect .card__shine,
.card--no-effect .card__glare {
  display: none;
}

/* コレクションアイテム全体はクリック可能 */
.collectItem {
  cursor: pointer;
  touch-action: auto;
  transition: transform 0.2s ease;
}

.collectItem:hover {
  transform: scale(1.05);
}

.collectItem:active {
  transform: scale(0.98);
}

/* コレクション内のカードにホバー時の軽いシャドウ */
.collectItem:hover .card__rotator {
  box-shadow: 
    0 0 20px rgba(255, 215, 120, 0.3),
    0px 10px 20px -8px rgba(0,0,0,0.6);
}


/* ===============================================
   スマホでのスクロール制御
   =============================================== */

/* カードエリアでのタッチ操作時、ページスクロールを防止 */
.card__rotator {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* カードリビールエリア全体でオーバースクロールを防止 */
.cardReveal {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;
}

/* フリップラッパーでのタッチ操作制御 */
.flipWrap {
  touch-action: none;
}

/* モーダル内のカードコレクショングリッド */
.collectionGrid {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* コレクションアイテムはスクロール可能だが、カード自体はスクロール防止 */
.collectItem {
  touch-action: auto;
}

.collectItem .card {
  touch-action: none;
}


/* ===============================================
   エフェクトなしカード（コレクション用）
   =============================================== */

/* エフェクトなしカードはシンプルな画像表示のみ */
.card--no-effect .card__shine,
.card--no-effect .card__glare,
.card--no-effect .card__shine:before,
.card--no-effect .card__shine:after,
.card--no-effect .card__glare:after {
  display: none !important;
}

/* エフェクトなしカードは3D変形しない */
.card--no-effect .card__translater,
.card--no-effect .card__rotator {
  transform: none !important;
}


/* ===============================================
   カード詳細モーダル
   =============================================== */

.cardDetailModal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cardDetailModal.active {
  opacity: 1;
}

.cardDetailModal .modal__backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.cardDetailModal .modal__panel--card {
  position: relative;
  width: min(500px, 90vw);
  max-height: 90vh;
  padding: 40px 20px 20px;
  background: rgba(15, 15, 20, 0.95);
  border: 2px solid rgba(255, 215, 120, 0.3);
  border-radius: 24px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(255, 215, 120, 0.1);
  animation: cardDetailFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes cardDetailFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.closeDetailBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
  padding: 0;
}

.closeDetailBtn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.closeDetailBtn:active {
  transform: rotate(90deg) scale(0.9);
}

.cardDetailContainer {
  display: grid;
  place-items: center;
  padding: 20px;
  min-height: 400px;
  width: 100%;
}

.cardDetail {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

/* カードのアスペクト比を確保 */
.cardDetail .card {
  width: 100%;
  height: auto;
}

.cardDetail .card__translater {
  aspect-ratio: 2.5 / 3.5;
  width: 100%;
}

/* カード詳細内のカードは通常のインタラクティブカード */
/* card__frontの配置を確実にする */
.cardDetail .card__front {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  border-radius: var(--radius);
  overflow: hidden;
}

/* 画像はエフェクトの下に配置 */
.cardDetail .card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: translateZ(0.1px);
  display: block;
}

.cardDetail .card__shine,
.cardDetail .card__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius);
}

/* オーバーレイ画像があれば最上位に */
.cardDetail .card__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
  transform: translateZ(2px);
}

.cardDetail .card__meta {
  position: relative;
  z-index: 5;
  display: block !important;
  font-size: 13px;
  padding: 10px 12px;
  align-self: end;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .cardDetailModal .modal__panel--card {
    width: 95vw;
    max-width: 500px;
    padding: 60px 20px 20px;
    max-height: 95vh;
    overflow-y: auto;
  }
  
  .cardDetailContainer {
    padding: 10px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .cardDetail {
    width: 90vw;
    max-width: 280px;
  }
  
  /* スマホでカードのアスペクト比を維持 */
  .cardDetail .card__translater {
    aspect-ratio: 2.5 / 3.5;
    width: 100%;
  }
  
  .cardDetail .card__rotator {
    width: 100%;
    height: 100%;
  }
  
  .cardDetail .card__meta {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* 非常に小さい画面用（iPhone SE等） */
@media (max-width: 400px) {
  .cardDetailModal .modal__panel--card {
    width: 98vw;
    padding: 55px 10px 15px;
  }
  
  .cardDetail {
    width: 85vw;
    max-width: 240px;
  }
  
  .cardDetailContainer {
    padding: 5px;
  }
  
  .closeDetailBtn {
    width: 36px;
    height: 36px;
    font-size: 20px;
    top: 10px;
    right: 10px;
  }
}


/* 横向きモード（ランドスケープ）対応 */
@media (max-height: 600px) and (orientation: landscape) {
  .cardDetailModal .modal__panel--card {
    max-height: 95vh;
    padding: 50px 20px 15px;
    width: min(400px, 80vw);
  }
  
  .cardDetailContainer {
    padding: 10px;
    min-height: auto;
  }
  
  .cardDetail {
    max-width: 250px;
  }
  
  .closeDetailBtn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* 小さい横向き画面 */
@media (max-height: 500px) and (orientation: landscape) {
  .cardDetailModal .modal__panel--card {
    max-height: 98vh;
    padding: 45px 15px 10px;
    width: min(350px, 75vw);
  }
  
  .cardDetail {
    max-width: 200px;
  }
  
  .cardDetail .card__meta {
    font-size: 10px;
    padding: 6px 8px;
  }
}