/* えもえちVtuber診断 — シャイニー版 専用スタイル */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,600&family=DotGothic16&display=swap');

:root {
  /* シャイニーカラーパレット */
  --bg1: #fff0f9;
  --bg2: #f2e0ff;
  --bg3: #ffe6f5;
  --pink: #ff7ec1;
  --pink-deep: #ff4d9d;
  --pink-vivid: #ff2589;
  --lav: #9d7bff;
  --lav-deep: #7a52ff;
  --holo1: #ffd6ec;
  --holo2: #cfd5ff;
  --holo3: #ffe9d1;
  --holo4: #d1f0ff;
  --gold: #ffd580;
  --ink: #3d1f4a;
  --ink-soft: #6f507a;
  --ink-faint: #a48bad;
  --white: #fffbfe;
  --cream: #fff5fa;

  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-sm: 16px;

  --shadow-shiny: 0 20px 60px -20px rgba(255,90,180,.5), 0 8px 24px -8px rgba(160,110,255,.4);
  --shadow-glow: 0 0 40px rgba(255,150,210,.6), 0 12px 40px -12px rgba(200,130,220,.5);
  --shadow-card: 0 24px 80px -30px rgba(155,90,200,.55), 0 8px 24px -8px rgba(255,130,190,.35);

  --page-bg: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 60%, var(--bg3) 100%);
  --holo-grad: conic-gradient(from 210deg at 50% 50%, var(--holo1), var(--holo2), var(--holo3), var(--holo4), var(--holo1));
  --btn-grad: linear-gradient(135deg, var(--pink-vivid) 0%, var(--lav) 100%);
  --btn-grad-hover: linear-gradient(135deg, var(--pink-deep) 0%, var(--lav-deep) 100%);
  --shine-line: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Zen Maru Gothic', system-ui, sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  min-height: 100vh;
}

.serif { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; letter-spacing: 0.02em; }
.pixel { font-family: 'DotGothic16', monospace; letter-spacing: 0.05em; }

/* ========== モバイル枠 ========== */
.phone-shell {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--page-bg);
  position: relative;
  overflow-x: hidden;
  overflow-y: visible; /* 結果画面下部が切れる件を解消 */
  padding-bottom: 110px; /* 結果画面・スタート画面 下部の見切れ余白（60→110へ拡張） */
}

/* ========== 背景の装飾レイヤー ========== */
.bg-holo-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--holo-grad);
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  animation: floatBlob 12s ease-in-out infinite;
}
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -30px) rotate(120deg); }
  66% { transform: translate(-15px, 20px) rotate(240deg); }
}

/* ========== きらめき ========== */
.sparkle {
  position: absolute;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255,180,220,.9)) drop-shadow(0 0 3px rgba(255,255,255,.9));
  animation: twinkle 2.4s ease-in-out infinite;
  will-change: opacity, transform;
}
.sparkle.gold {
  color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(255,215,140,.9));
}
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

.heart-float {
  position: absolute;
  pointer-events: none;
  animation: heartFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255,120,180,.5));
}
@keyframes heartFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
  50% { transform: translateY(-16px) rotate(8deg) scale(1.1); }
}

/* ========== ホロシャイン（表面の走光） ========== */
.holo-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.holo-shine::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: var(--shine-line);
  transform: translateX(-100%) rotate(0deg);
  animation: shineSweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes shineSweep {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  40% { opacity: 1; }
  60% { transform: translateX(100%); opacity: 1; }
  70% { opacity: 0; }
}

/* ========== ボタン ========== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 20px 32px;
  font-family: inherit;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 16px 40px -8px rgba(255,60,140,.55),
    0 4px 12px rgba(160,90,255,.4),
    inset 0 -3px 10px rgba(255,255,255,.25),
    inset 0 2px 6px rgba(255,255,255,.5);
  transition: transform .2s, box-shadow .2s;
  text-shadow: 0 1px 4px rgba(120,20,80,.4);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px -8px rgba(255,60,140,.65),
    0 6px 18px rgba(160,90,255,.5),
    inset 0 -3px 10px rgba(255,255,255,.3),
    inset 0 2px 6px rgba(255,255,255,.6);
}
.btn-primary:active { transform: translateY(0) scale(.97); }
.btn-primary > * { position: relative; z-index: 1; }

.btn-ghost {
  background: rgba(255,255,255,.75);
  color: var(--ink);
  border: 1.5px solid rgba(255,143,191,.5);
  border-radius: 999px;
  padding: 13px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(255,143,191,.2), inset 0 1px 0 rgba(255,255,255,.9);
  transition: all .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.9); }

/* ========== タグ（シャイニーバッジ） ========== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: var(--pink-deep);
  background:
    linear-gradient(135deg, #fff 0%, #fff2f9 40%, #f5ecff 100%);
  border: 1px solid rgba(255,143,191,.5);
  box-shadow:
    0 3px 10px rgba(255,143,191,.3),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 3px rgba(255,180,220,.25);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.tag::before {
  content: '✦';
  font-size: 9px;
  color: var(--pink);
  animation: twinkle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,143,191,.8));
}
.tag.tag-holo {
  background: var(--holo-grad);
  color: #6b2a5a;
  border-color: rgba(255,255,255,.8);
}

/* ========== プレースホルダー画像 ========== */
.img-ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.7) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(255,220,240,.6) 0%, transparent 55%),
    linear-gradient(135deg, hsl(var(--phHueA,330) 90% 82%) 0%, hsl(var(--phHueB,270) 80% 82%) 100%);
}
.img-ph.holo-bg {
  background:
    var(--holo-grad),
    linear-gradient(135deg, hsl(var(--phHueA,330) 90% 82%) 0%, hsl(var(--phHueB,270) 80% 82%) 100%);
  background-blend-mode: soft-light, normal;
}
.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.7) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 80%, rgba(255,180,220,.5) 0%, transparent 40%);
  filter: blur(20px);
}
.img-ph::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: 'DotGothic16', monospace;
  font-size: 9px;
  color: rgba(80,40,90,.6);
  letter-spacing: .1em;
  background: rgba(255,255,255,.7);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  z-index: 2;
}
/* 実画像がある場合:img-ph のホロ背景とラベル抑止し<img>を全面に */
.img-ph.has-img {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0) 0%, transparent 60%),
    linear-gradient(135deg, hsl(var(--phHueA,330) 60% 92%) 0%, hsl(var(--phHueB,270) 60% 92%) 100%);
}
.img-ph.has-img::before { display: none; }
.img-ph.has-img::after { display: none; }
.img-ph.has-img .talent-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

/* ========== 放送局Xボタン ========== */
.btn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  background: #fff;
  color: #15202b;
  border: 1.5px solid #15202b;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px -6px rgba(21,32,43,.4), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s, box-shadow .2s;
}
.btn-x:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(21,32,43,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-x.x-light {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(21,32,43,.4);
  color: #15202b;
  font-size: 12px;
  padding: 9px 14px;
}

/* 画像の内側の光沢オーバーレイ */
.img-shine-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 30%, transparent 70%, rgba(255,180,220,.2) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ========== グラデ枠（メタリック風） ========== */
.holo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px;
  background:
    conic-gradient(from 0deg,
      #ff7ec1, #b79bff, #ffd6ec, #cfd5ff, #ffe9d1, #ff7ec1);
  box-shadow: var(--shadow-shiny);
}
.holo-frame > .holo-inner {
  border-radius: calc(var(--radius-lg) - 2px);
  background: linear-gradient(180deg, var(--white), var(--cream));
  overflow: hidden;
}

/* ========== リンク・A11y ========== */
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
button:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }

/* ========== ステージ用（3画面レビュー） ========== */
.review-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.review-header {
  text-align: center;
  padding: 20px 0 24px;
  color: var(--ink);
}
.review-header h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: var(--btn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255,120,180,.35));
}
.review-header .meta { font-size: 12px; color: var(--ink-soft); letter-spacing: .15em; }

.toolbar {
  position: sticky; top: 12px; z-index: 30;
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  padding: 12px 12px;
  margin-bottom: 24px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,143,191,.3);
  border-radius: 22px;
  box-shadow: 0 12px 40px -12px rgba(200,140,190,.4);
  backdrop-filter: blur(14px);
}
.tool-group { display: flex; align-items: center; gap: 8px; }
.tool-label { font-size: 10px; letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; font-weight: 700; }
.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; border: 1px solid rgba(255,143,191,.3); box-shadow: inset 0 1px 2px rgba(255,180,220,.15); }
.seg button {
  border: none; background: transparent; padding: 8px 16px; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  letter-spacing: .05em; transition: all .2s;
}
.seg button.on {
  background: var(--btn-grad);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(255,90,160,.55), inset 0 1px 0 rgba(255,255,255,.4);
}

.stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(360px, 1fr));
  gap: 24px;
  align-items: start;
  justify-content: center;
}
@media (max-width: 1200px) {
  .stage { grid-template-columns: 1fr; }
  .stage .frame { max-width: 460px; margin: 0 auto; }
}
.frame {
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(150,90,180,.5), 0 0 0 1px rgba(255,255,255,.6);
  position: relative;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
}
.frame .frame-label {
  text-align: center;
  padding: 12px 0 14px;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--pink-deep);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,143,191,.25);
}
.frame .frame-inner {
  max-height: 920px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.frame .frame-inner::-webkit-scrollbar { width: 6px; }
.frame .frame-inner::-webkit-scrollbar-thumb { background: rgba(255,143,191,.4); border-radius: 999px; }

body.focus-mode .stage { grid-template-columns: 1fr; }
body.focus-mode .frame { max-width: 460px; margin: 0 auto; }
body.focus-mode .frame .frame-inner { max-height: none; }

.note {
  margin: 40px auto 0;
  max-width: 820px;
  padding: 22px 26px;
  background: rgba(255,255,255,.85);
  border-radius: 22px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.9;
  border: 1px solid rgba(255,143,191,.3);
  box-shadow: 0 12px 40px -12px rgba(200,140,190,.3);
}
.note b { color: var(--pink-deep); }