:root {
  --page-overlay-a: rgba(0, 0, 0, 0.35);
  --page-overlay-b: rgba(0, 0, 0, 0.55);
  --glass-bg-a: rgba(255, 255, 255, 0.16);
  --glass-bg-b: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-border-2: rgba(255, 255, 255, 0.06);
  --text: #ffffff;
  --accent: #6cdcff;
  --accent-2: #9b8cff;
  --shine: rgba(255, 255, 255, 0.55);
  --shadow: rgba(0, 0, 0, 0.55);
}

.stage-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  opacity: 0.95;
}

.glass-cta {
  --size: 240px;
  --radius: 18px;
   /* 画面中央に固定 */
  /* position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
  position: fixed;
  left: 30%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-grid;
  place-items: center;
  min-width: var(--size);
  min-height: 64px;
  padding: 16px 28px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  background:
    linear-gradient(180deg, var(--glass-bg-a), var(--glass-bg-b));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 10px 30px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  /* 輪郭をわずかに液体のように揺らす */
  animation: wobble 13s ease-in-out infinite;
}
.glass-cta:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent), white 20%); outline-offset: 2px; }
.glass-cta:hover { transform: translate(-50%, -50%) translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.18); border-color: color-mix(in oklab, var(--glass-border), white 30%); }
.glass-cta:active { transform: translate(-50%, -50%) translateY(0); }

/* Subtle moving border glow */
.glass-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent), white 25%), color-mix(in oklab, var(--accent-2), white 25%), transparent 25%, transparent 75%, color-mix(in oklab, var(--accent-2), white 25%), color-mix(in oklab, var(--accent), white 25%));
  filter: blur(18px) saturate(140%);
  opacity: 0.25;
  z-index: -1;
  animation: spin 9s linear infinite;
}

/* Shine that tracks pointer (via CSS vars) */
.glass-cta::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px 300px at var(--mx, 50%) var(--my, 50%), var(--shine-color, var(--shine)), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.glass-cta:hover::after { opacity: 0.45; }

.label {
  position: relative;
  z-index: 3;
}

/* ====== Liquid Glass reusable component (.liquid-glass) ====== */
.liquid-glass {
  --lg-min-width: 240px;
  --lg-min-height: 64px;
  --lg-radius: 18px;
  --lg-padding: 16px 28px;

  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--lg-min-width);
  min-height: var(--lg-min-height);
  padding: var(--lg-padding);
  border-radius: var(--lg-radius);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  background: linear-gradient(180deg, var(--glass-bg-a), var(--glass-bg-b));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 10px 30px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.5s ease;
}

.liquid-glass:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent), white 20%); outline-offset: 2px; }
.liquid-glass:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.18); border-color: color-mix(in oklab, var(--glass-border), white 30%); }

/* Subtle moving border glow */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent), white 25%), color-mix(in oklab, var(--accent-2), white 25%), transparent 25%, transparent 75%, color-mix(in oklab, var(--accent-2), white 25%), color-mix(in oklab, var(--accent), white 25%));
  -webkit-filter: blur(18px) saturate(140%);
  filter: blur(18px) saturate(140%);
  opacity: 0.25;
  z-index: -1;
  animation: spin 9s linear infinite;
  will-change: transform, filter;
}

/* Shine that tracks pointer (via CSS vars) */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px 300px at var(--mx, 50%) var(--my, 50%), var(--shine-color, var(--shine)), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.25;
  transition: opacity 0.2s ease;
}
.liquid-glass:hover::after { opacity: 0.45; }

.liquid-glass .label { position: relative; z-index: 3; }
.liquid-glass.is-wobbly { animation: wobble 13s ease-in-out infinite; }

/* Internals: drops/grain/bulge (also applied to legacy .glass-cta) */
.liquid-glass .liquid,
[data-liquid-glass] .liquid,
.glass-cta .liquid {
  position: absolute;
  inset: -25%;
  /* Ensure gooey effect works on Safari (url only; internal blur is in SVG) */
  -webkit-filter: url('#goo');
  filter: url('#goo');
  will-change: transform, filter;
  transform: translateZ(0);
  z-index: 2;
  pointer-events: none;
}

/* Disable liquid drop effect (water drops) */
.liquid-glass .liquid,
[data-liquid-glass] .liquid,
.glass-cta .liquid { display: none !important; }

.liquid-glass .drop,
[data-liquid-glass] .drop,
.glass-cta .drop {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent), white 15%);
  opacity: .55;
  animation: float 8s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
}
.liquid-glass .drop.d1, [data-liquid-glass] .drop.d1, .glass-cta .drop.d1 { left: 12%; top: 24%; animation-duration: 7s; }
.liquid-glass .drop.d2, [data-liquid-glass] .drop.d2, .glass-cta .drop.d2 { right: 16%; top: 18%; animation-duration: 9s; }
.liquid-glass .drop.d3, [data-liquid-glass] .drop.d3, .glass-cta .drop.d3 { left: 22%; bottom: 18%; animation-duration: 10s; }
.liquid-glass .drop.d4, [data-liquid-glass] .drop.d4, .glass-cta .drop.d4 { right: 24%; bottom: 22%; animation-duration: 8s; }

@keyframes float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(4px,-6px,0) scale(1.12); }
}

.liquid-glass .grain,
[data-liquid-glass] .grain,
.glass-cta .grain {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: soft-light;
  opacity: .25;
}

.liquid-glass .bulge,
[data-liquid-glass] .bulge,
.glass-cta .bulge {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--shine-color, var(--shine));
  filter: blur(8px);
  animation: bulge 600ms ease-out forwards;
}

@keyframes bulge {
  0% { transform: scale(.3); opacity: .45; }
  70% { transform: scale(1.4); opacity: .25; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* missing keyframes used by .glass-cta as well */
@keyframes wobble {
  0%, 100% { border-radius: var(--radius, 18px); }
  25% { border-radius:
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 1px)
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 1px) /
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 2px)
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 2px); }
  50% { border-radius:
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 2px)
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 2px) /
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 1px)
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 1px); }
  75% { border-radius:
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 2px)
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 1px) /
    calc(var(--radius, 18px) + 1px) calc(var(--radius, 18px) + 1px)
    calc(var(--radius, 18px) + 2px) calc(var(--radius, 18px) + 2px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .liquid-glass::before,
  .liquid-glass::after,
  .glass-cta,
  .glass-cta::before,
  .glass-cta::after,
  .drop, .bulge { animation: none !important; }
}

/* Button semantics for .liquid-glass */
button.liquid-glass {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
button.liquid-glass { cursor: pointer; user-select: none; }
button.liquid-glass:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Contrast-aware text legibility for .liquid-glass ===== */
/* 基本: テキストにアウトラインとシャドウ、文字背後に薄いスクラムを敷く */
.liquid-glass .label {
  z-index: 4; /* テキストを最前面に */
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.35);
  -webkit-text-stroke: 0.3px rgba(0,0,0,0.35);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Narrow scope to opt-in class */
.liquid-glass.lg-contrast-auto .label { /* keep same styles, just scoped */ }

/* Adjust selectors to require .lg-contrast-auto */
.liquid-glass .label { }
.liquid-glass.lg-contrast-auto .label { z-index: 4; }

/* ::before scrim */
.liquid-glass.lg-contrast-auto .label::before {
  content: "";
  position: absolute;
  inset: -6px -10px; /* テキストの周囲に余白を持つ楕円スクラム */
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.22), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  z-index: 3; /* 液体やグレインより前、テキストより後ろ */
  opacity: 0; /* 通常は非表示。低コントラスト時のみ表示 */
  pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease, filter 0.5s ease;
}

/* 低コントラスト時のみスクラムを表示 */
.liquid-glass.lg-contrast-auto[data-low-contrast="true"] .label::before { opacity: .9; }

/* 自動判定で明るい背景と判断された場合（黒系テキストへ） */
.liquid-glass.lg-contrast-auto[data-contrast="dark"] {
  /* --text: #0b0b0b; */
  --text: #0b0b0b;
  --glass-bg-a: rgba(255,255,255,0.28);
  --glass-bg-b: rgba(255,255,255,0.12);
  --shadow: rgba(0,0,0,0.35);
}

.liquid-glass.lg-contrast-auto[data-contrast="dark"] .label {
  text-shadow: 0 1px 2px rgba(255,255,255,0.55), 0 0 8px rgba(255,255,255,0.3);
  -webkit-text-stroke: 0.3px rgba(255,255,255,0.35);
}

/* 明るい背景かつ低コントラストの場合は白系スクラム */
.liquid-glass.lg-contrast-auto[data-low-contrast="true"][data-contrast="dark"] .label::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
}