.supporters-card{
  --mx:78%;
  --my:38%;
  height:178px;
}
.supporters-card .cosmic-card__stack{
  height:160px;
}

/* Main10と同じCard/Stack/Glassをそのまま使用し、支援者Cardだけ配色を変える。 */
.supporters-card .cosmic-card__ghost{
  border-color:color-mix(in srgb,var(--brand-signal) 38%,rgba(151,146,255,.31));
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-signal) 16%,#101010),#050505);
  box-shadow:0 0 28px color-mix(in srgb,var(--brand-signal) 10%,transparent),inset 0 1px 0 rgba(246,246,246,.08);
}
.supporters-card .cosmic-card__ghost::before,
.supporters-card .cosmic-card__ghost::after{
  border-color:color-mix(in srgb,var(--brand-signal) 24%,rgba(125,130,224,.18));
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-signal) 10%,#0a0a0a),#050505);
}
.supporters-card .cosmic-card__glass{
  background:
    radial-gradient(72% 120% at 78% 18%,color-mix(in srgb,var(--brand-signal) 24%,transparent),transparent 58%),
    radial-gradient(90% 120% at 16% 110%,rgba(246,246,246,.08),transparent 68%),
    linear-gradient(128deg,color-mix(in srgb,var(--brand-signal) 18%,#101010) 0%,#101010 42%,#090909 100%);
  border-color:color-mix(in srgb,rgba(246,246,246,.72) 58%,var(--brand-signal));
  box-shadow:
    0 24px 64px rgba(0,0,0,.72),
    0 0 0 1px color-mix(in srgb,var(--brand-signal) 10%,transparent),
    0 0 34px color-mix(in srgb,var(--brand-signal) 10%,transparent),
    inset 0 1px 0 rgba(246,246,246,.24),
    inset 0 -1px 0 color-mix(in srgb,var(--brand-signal) 18%,transparent);
}
.supporters-card .cosmic-card__glass::before{
  background:
    linear-gradient(105deg,transparent 0 30%,rgba(255,255,255,.15) 42%,color-mix(in srgb,var(--brand-signal) 12%,transparent) 50%,transparent 60%) -170% 0/66% 100% no-repeat,
    radial-gradient(54% 18% at 48% 48%,color-mix(in srgb,var(--brand-signal) 24%,transparent),transparent 76%);
}
.supporters-card .cosmic-card__glass::after{
  background:radial-gradient(220px 120px at var(--mx) var(--my),rgba(246,246,246,.11),transparent 72%);
}
.supporters-card .cosmic-card__edge{
  background:linear-gradient(115deg,rgba(246,246,246,.74),color-mix(in srgb,var(--brand-signal) 52%,transparent) 38%,rgba(180,180,180,.12) 68%,color-mix(in srgb,var(--brand-signal) 62%,#f6f6f6));
  opacity:.86;
}
.supporters-card .cosmic-card__flare{
  background:radial-gradient(220px 120px at var(--mx) var(--my),color-mix(in srgb,var(--brand-signal) 22%,transparent),transparent 74%);
}

.supporters-card__content{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:24px clamp(24px,5vw,50px);
  text-align:left;
}
.supporters-card__title{
  display:block;
  margin:0;
  color:rgba(248,248,248,.98);
  font:620 clamp(24px,3.5vw,34px)/1.14 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  letter-spacing:.005em;
  text-shadow:0 0 18px color-mix(in srgb,var(--brand-signal) 14%,transparent);
}
.supporters-card__description{
  display:block;
  margin-top:14px;
  color:rgba(210,210,210,.88);
  font:400 clamp(12px,1.4vw,14px)/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  letter-spacing:.005em;
}
.supporters-card__description-line{display:block;white-space:nowrap}

/* 同じcosmic-modalを使い、支援者Cardを開いた時だけ配色をCard側へ合わせる。 */
.cosmic-expanded.is-supporters .cosmic-expanded__ghost{
  border-color:color-mix(in srgb,var(--brand-signal) 34%,rgba(145,138,255,.28));
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-signal) 12%,#101010),#050505);
}
.cosmic-expanded.is-supporters .cosmic-expanded__glass{
  border-color:color-mix(in srgb,rgba(246,246,246,.66) 62%,var(--brand-signal));
  background:
    radial-gradient(80% 72% at 48% 44%,color-mix(in srgb,var(--brand-signal) 20%,transparent),transparent 72%),
    radial-gradient(120% 150% at var(--mx) -10%,rgba(235,235,235,.12),transparent 40%),
    linear-gradient(132deg,color-mix(in srgb,var(--brand-signal) 16%,#101010),#080808 50%,#111111);
  box-shadow:0 34px 100px rgba(0,0,0,.70),0 0 54px color-mix(in srgb,var(--brand-signal) 13%,transparent),inset 0 1px 0 rgba(246,246,246,.26),inset 0 -1px 0 color-mix(in srgb,var(--brand-signal) 18%,transparent);
}
.cosmic-expanded.is-supporters .cosmic-expanded__edge{
  background:linear-gradient(115deg,rgba(246,246,246,.72),color-mix(in srgb,var(--brand-signal) 50%,transparent) 42%,color-mix(in srgb,var(--brand-signal) 58%,#f6f6f6));
}

.top-copyright{
  width:min(920px,96%);
  margin:14px auto 0;
  padding:8px 0 0;
  color:var(--muted);
  text-align:center;
  font:600 11px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  letter-spacing:.18em;
  white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
  .supporters-card:hover .cosmic-card__stack{filter:drop-shadow(0 18px 30px color-mix(in srgb,var(--brand-signal) 14%,transparent))}
  .supporters-card:hover .cosmic-card__edge{opacity:1}
}
.supporters-card:focus-visible .cosmic-card__stack{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--brand-signal) 24%,transparent))}

@media (max-width:560px){
  .supporters-card{height:174px}
  .supporters-card .cosmic-card__stack{height:156px}
  .supporters-card__content{padding:22px 20px}
  .supporters-card__title{font-size:clamp(21px,5.8vw,25px)}
  .supporters-card__description{margin-top:12px;font-size:clamp(10.5px,2.9vw,11.5px);line-height:1.66;letter-spacing:-.015em}
  .supporters-card__description-line{white-space:nowrap}
  .top-copyright{margin-top:12px;padding-top:6px;font-size:10.5px;letter-spacing:.16em}
}

@media (min-width:768px){
  .top-copyright{font-size:12px;letter-spacing:.20em}
}

@media (prefers-reduced-motion:reduce){
  .supporters-card .cosmic-card__glass::before{animation:none}
  .supporters-card .cosmic-card__stack{transition:none}
}