/* =========== 基本 =========== */
:root{
  --primary:#6b7cff;
  --pastel1:#ffc6e0;
  --pastel2:#bcd8ff;
  --pastelText:#3a3a3a;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:#222; background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  overflow-x:hidden;
}
.wrap{ max-width:900px; margin:0 auto; padding:16px }
/* .center{ text-align:center } */
h1,h2,h3{
  margin:.2em 0; font-weight:800; letter-spacing:.02em;
  font-family:'Yomogi', cursive;
  text-align: center;
}

/* =========== パステル背景＆エンドレス泡 =========== */
.pastel-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 800px at 0% 0%,    #ffb3d9 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 30%, #99ccff 0%, transparent 60%),
    radial-gradient(900px 600px  at 20% 100%, #fff27a 0%, transparent 60%),
    radial-gradient(800px 800px  at 80% 90%,  #baffc9 0%, transparent 60%);
  filter:saturate(1.12) blur(.2px);
  animation:bgShift 18s linear infinite alternate;
}
@keyframes bgShift{
  0%{ transform:translate3d(0,0,0) scale(1); filter:hue-rotate(0deg) saturate(1.05) }
  100%{ transform:translate3d(-2%,-1%,0) scale(1.02); filter:hue-rotate(8deg) saturate(1.18) }
}
#bubbles-layer{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.bubble{
  position:absolute; bottom:-10vh; border-radius:50%;
  background:
    radial-gradient(35% 35% at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    radial-gradient(60% 60% at 70% 70%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
  border:1px solid rgba(120,150,255,.35);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.65), 0 0 18px rgba(107,124,255,.12);
  mix-blend-mode:screen; opacity:.8;
  animation: floatUp linear forwards;
}
@keyframes floatUp{ to{ transform:translateY(-120vh); opacity:0 } }

/* =========== スタート画面 =========== */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:14px; padding:20px; z-index:1;
}
.hero-title{
  padding-top: 100px;
}
.hero h1{ margin:0; font-size:clamp(28px,4vw,40px)}
.hero .lead{ margin:0; font-size:clamp(14px,2.2vw,18px); opacity:.9 }
.hero .btn{ margin-top:10px }

/* =========== 診断UI =========== */
#play-panel{ display:block; text-align:center; margin-top:80px; }
.play-head{ margin: 20px auto 40px; max-width:600px; }
.meter{ flex:1; height:10px; background:#eee; border-radius:999px; overflow:hidden }
.meter>i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#ff6ec4,#7873f5,#4ade80,#facc15,#f87171);
  background-size:300% 100%; animation:rainbow 4s linear infinite;
  transition:width .3s ease; border-radius:999px;
}
@keyframes rainbow{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
.qtitle{ font-weight:700; color:#444; margin: 16px 0; }
.choice-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin: 20px auto; max-width:600px;
}
@media (max-width:720px){ .choice-2{ grid-template-columns:1fr } }
.choice-card{
  padding:14px; border:1px solid #eee; border-radius:16px; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05); cursor:pointer; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.choice-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.08); border-color:#e6e9ff;
}
.choice-card h3{ margin:.2em 0; font-size:1.05rem; line-height:1.35 }
.choice-card p{ margin:0; color:#555; font-size:.95rem }
.badge{ display:inline-block; font-size:.75rem; padding:.18rem .5rem; border-radius:999px; background:#eef0ff; margin-bottom:6px }
#skip-btn{ display:inline-block; margin-top:40px; }

/* =========== ボタン共通 =========== */
.btn{
  --r:999px; --padY:.9rem; --padX:1.3rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:var(--padY) var(--padX); border-radius:var(--r); border:none;
  cursor:pointer; font-size:1rem; line-height:1; user-select:none;
  -webkit-tap-highlight-color:transparent; overflow:hidden; transform:translateZ(0);
}
.btn:focus-visible{ outline:3px solid rgba(123,143,255,.45); outline-offset:2px }
.btn-start{
  color:var(--pastelText);
  background:linear-gradient(135deg, var(--pastel1), var(--pastel2));
  border:1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 24px rgba(123,143,255,.28), inset 0 0 18px rgba(255,255,255,.45);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-start::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%); filter:blur(1px); mix-blend-mode:screen; transition:transform .8s ease; pointer-events:none;
}
.btn-start:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.02);
  box-shadow: 0 14px 30px rgba(123,143,255,.36), inset 0 0 22px rgba(255,255,255,.55);
}
.btn-start:hover::after{ transform:translateX(120%) }
.btn-start:active{ transform:translateY(0) scale(.985) }
@media (prefers-reduced-motion: reduce){
  .bubble, .screen-bubble, .finish-smoke-screen, .finish-big-bubble, .finish-ring{ animation:none !important }
  .btn-start{ transition:none !important }
  .btn-start::after{ display:none !important }
}

/* =========== 結果ページ =========== */
.result-page main{ 
  max-width:900px; margin:0 auto; padding:60px 16px; text-align:center;
}
.result-title{
  font-size:2rem; color:#333; margin-bottom:20px;
  opacity:0; transform:translateY(20px);
  animation:fadeInUp 1s ease forwards;
}
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0) } }

/* ドーナツゲージ */
.donut-wrap{ 
  position:relative; width:160px; height:160px; margin:0 auto 20px;
  opacity:0; transform:translateY(20px); animation:fadeInUp 1s ease .4s forwards;
}
.donut{ width:100%; height:100%; transform:rotate(-90deg); }
.donut .track{ fill:none; stroke:#eee; stroke-width:3; }
.donut .value{ fill:none; stroke:url(#grad); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 1.2s ease; }
.donut-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:bold; color:#444;
}
.score-num{ font-size:1.6rem }

/* コメントや傾向テキスト */
.tendency{
  margin:20px auto; font-size:1rem; color:#444; opacity:0;
  transform:translateY(20px); animation:fadeInUp 1s ease .8s forwards;
}

/* タグ */
.bubble-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px auto; }
.tag{ padding:6px 12px; border-radius:999px; font-size:.85rem; background:rgba(255,255,255,.8); box-shadow:0 2px 6px rgba(0,0,0,.08); }

/* リトライボタン */
.retry-btn, .btn-start{ margin-top:20px; }

/* おすすめ */
.recommend{
  margin-top:40px; text-align:center;
  opacity:0; transform:translateY(30px);
  animation:fadeInUp 1s ease 1.2s forwards;
}
.reco-title{ font-size:1.3rem; margin-bottom:16px; color:#444; }
.reco-list{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.reco-card{
  background:rgba(255,255,255,0.85); padding:12px 16px; border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease;
}
.reco-card:hover{ transform:translateY(-4px); box-shadow:0 4px 12px rgba(0,0,0,.12); }