/* 恋のダンス占い — Styles */
:root {
  --primary: hsl(320, 70%, 55%);
  --primary-glow: hsla(320, 80%, 60%, 0.3);
  --accent: hsl(280, 60%, 60%);
  --gold: hsl(42, 90%, 60%);
  --bg-1: hsl(280, 40%, 8%);
  --bg-2: hsl(320, 35%, 12%);
  --bg-3: hsl(260, 30%, 15%);
  --surface: hsla(300, 20%, 18%, 0.6);
  --surface-hover: hsla(300, 20%, 22%, 0.8);
  --surface-glass: hsla(300, 20%, 20%, 0.4);
  --text: hsl(300, 10%, 92%);
  --text-sec: hsl(300, 10%, 70%);
  --text-muted: hsl(300, 8%, 55%);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --font: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#app { position: relative; min-height: 100vh; }

/* Screens */
.screen { display:none; min-height:100vh; position:relative; }
.screen.active { display:block; animation: fadeIn .5s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.screen-inner { max-width:480px; margin:0 auto; padding:24px 20px 80px; }

/* Hero BG */
.hero-bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.sparkle {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px 2px var(--gold);
  animation: sparkleF 4s ease-in-out infinite;
}
.sparkle-1{top:12%;left:15%;animation-delay:0s;animation-duration:3.5s}
.sparkle-2{top:25%;left:78%;animation-delay:.5s;animation-duration:4.2s}
.sparkle-3{top:45%;left:8%;animation-delay:1s;animation-duration:3.8s}
.sparkle-4{top:60%;left:85%;animation-delay:1.5s;animation-duration:4.5s}
.sparkle-5{top:75%;left:22%;animation-delay:2s;animation-duration:3.2s}
.sparkle-6{top:35%;left:55%;animation-delay:.7s;animation-duration:5s}
.sparkle-7{top:80%;left:65%;animation-delay:1.2s;animation-duration:4s}
.sparkle-8{top:15%;left:42%;animation-delay:2.5s;animation-duration:3.6s}
@keyframes sparkleF { 0%,100%{opacity:0;transform:translateY(0) scale(.5)} 50%{opacity:1;transform:translateY(-20px) scale(1.2)} }

.note { position:absolute; font-size:22px; color:hsla(320,60%,70%,.3); animation:noteF 6s ease-in-out infinite; }
.note-1{top:20%;left:10%} .note-2{top:40%;left:82%;animation-delay:1.5s}
.note-3{top:65%;left:5%;animation-delay:3s} .note-4{top:30%;left:90%;animation-delay:4.5s}
@keyframes noteF { 0%,100%{opacity:0;transform:translateY(0) rotate(-10deg)} 50%{opacity:.7;transform:translateY(-25px) rotate(5deg)} }

.deco-ring { position:absolute; border-radius:50%; border:1px solid hsla(320,60%,60%,.1); animation:ringP 6s ease-in-out infinite; }
.deco-ring-1{width:300px;height:300px;top:-80px;right:-100px;border-width:2px;border-color:hsla(280,60%,60%,.08)}
.deco-ring-2{width:200px;height:200px;bottom:20%;left:-60px;border-color:hsla(320,70%,60%,.06);animation-delay:2s}
.deco-ring-3{width:150px;height:150px;top:50%;right:-40px;border-color:hsla(42,80%,60%,.06);animation-delay:4s}
@keyframes ringP { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.1);opacity:1} }

/* TOP */
.top-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; text-align:center; position:relative; z-index:1; }
.hero-icon { margin-bottom:16px; }
.hero-emoji { font-size:72px; display:inline-block; filter:drop-shadow(0 0 20px var(--primary-glow)); }
.dancing-emoji { animation: danceBounce 2s ease-in-out infinite; }
@keyframes danceBounce { 0%,100%{transform:translateY(0) rotate(0)} 20%{transform:translateY(-8px) rotate(-5deg)} 40%{transform:translateY(0) rotate(5deg)} 60%{transform:translateY(-12px) rotate(-3deg)} 80%{transform:translateY(-4px) rotate(3deg)} }

.hero-title {
  font-size:2.2rem; font-weight:700;
  background: linear-gradient(135deg, hsl(320,80%,75%), hsl(42,90%,70%), hsl(280,60%,75%));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:12px; letter-spacing:.05em;
}
.hero-subtitle { font-size:1.15rem; color:var(--text); font-weight:500; margin-bottom:8px; line-height:1.8; }
.hero-lead { font-size:.88rem; color:var(--text-sec); margin-bottom:32px; }

.btn-start {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 40px; font-size:1.05rem; font-weight:700; font-family:var(--font);
  color:#fff; background:linear-gradient(135deg, hsl(320,70%,50%), hsl(280,60%,50%));
  border:none; border-radius:var(--radius-full); cursor:pointer;
  transition:all .3s; box-shadow:0 4px 20px hsla(320,70%,50%,.4); position:relative; overflow:hidden;
}
.btn-start:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 30px hsla(320,70%,50%,.5); }
.btn-start:active { transform:translateY(0) scale(.98); }
.btn-arrow { transition:transform .3s; }
.btn-start:hover .btn-arrow { transform:translateX(4px); }
.top-note { margin-top:14px; font-size:.78rem; color:var(--text-muted); }

.hero-features { display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; justify-content:center; }
.feature-chip {
  display:flex; align-items:center; gap:5px; padding:8px 16px; font-size:.78rem;
  color:var(--text-sec); background:var(--surface-glass);
  border:1px solid hsla(300,20%,40%,.2); border-radius:var(--radius-full); backdrop-filter:blur(8px);
}

/* QUESTION */
.question-screen { padding-top:20px; min-height:100vh; display:flex; flex-direction:column; }
.progress-area { display:flex; align-items:center; gap:14px; margin-bottom:40px; }
.btn-back {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:var(--surface); color:var(--text-sec); cursor:pointer; transition:all .2s; flex-shrink:0;
}
.btn-back:hover { background:var(--surface-hover); color:var(--text); }
.progress-bar-wrap { flex:1; display:flex; align-items:center; gap:12px; }
.progress-bar { flex:1; height:6px; border-radius:3px; background:hsla(300,20%,30%,.4); overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, hsl(320,70%,55%), hsl(280,60%,60%)); transition:width .4s cubic-bezier(.4,0,.2,1); box-shadow:0 0 8px hsla(320,70%,55%,.4); }
.progress-text { font-size:.78rem; color:var(--text-muted); white-space:nowrap; min-width:35px; text-align:right; }

.question-area { text-align:center; margin-bottom:32px; }
.question-badge { display:inline-block; padding:4px 16px; font-size:.85rem; font-weight:700; color:var(--gold); background:hsla(42,80%,60%,.1); border:1px solid hsla(42,80%,60%,.2); border-radius:var(--radius-full); margin-bottom:16px; letter-spacing:.05em; }
.question-text { font-size:1.25rem; font-weight:700; line-height:1.8; }

.options-area { display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-bottom:40px; }
.option-btn {
  display:flex; align-items:center; gap:14px; padding:18px 20px;
  font-size:.95rem; font-weight:500; font-family:var(--font); color:var(--text);
  background:var(--surface); border:1px solid hsla(300,20%,40%,.15);
  border-radius:var(--radius); cursor:pointer; transition:all .25s; text-align:left; line-height:1.5;
  backdrop-filter:blur(8px); position:relative; overflow:hidden;
}
.option-btn:hover { border-color:hsla(320,50%,50%,.4); transform:translateY(-2px); box-shadow:0 4px 20px hsla(320,60%,40%,.15); }
.option-btn.selected { border-color:var(--primary); background:hsla(320,60%,40%,.3); transform:scale(.97); }
.option-btn.selected::after { content:'✓'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:1.1rem; color:var(--gold); }
.option-icon { font-size:1.4rem; flex-shrink:0; }
.fade-in { animation: fadeInUp .4s ease-out both; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* LOADING */
.loading-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; text-align:center; }
.loading-visual { position:relative; width:160px; height:160px; margin-bottom:32px; }
.loading-dancer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.loading-emoji { font-size:56px; animation:loadDance 1.5s ease-in-out infinite; }
@keyframes loadDance { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-15deg) scale(1.05)} 50%{transform:rotate(15deg) scale(1.1)} 75%{transform:rotate(-10deg) scale(1.05)} }
.loading-rings { position:absolute; inset:0; }
.loading-ring { position:absolute; border-radius:50%; border:2px solid transparent; }
.ring-1 { inset:0; border-top-color:hsl(320,70%,55%); border-right-color:hsla(320,70%,55%,.3); animation:ringR 1.5s linear infinite; }
.ring-2 { inset:15px; border-bottom-color:hsl(280,60%,55%); border-left-color:hsla(280,60%,55%,.3); animation:ringR 2s linear infinite reverse; }
.ring-3 { inset:30px; border-top-color:var(--gold); border-right-color:hsla(42,90%,60%,.3); animation:ringR 1.8s linear infinite; }
@keyframes ringR { to{transform:rotate(360deg)} }
.loading-text { font-size:1rem; font-weight:500; color:var(--text-sec); margin-bottom:20px; }
.loading-dots { display:flex; gap:6px; }
.loading-dots span { width:8px; height:8px; border-radius:50%; background:var(--primary); animation:dotP 1.2s ease-in-out infinite; }
.loading-dots span:nth-child(2){animation-delay:.2s} .loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotP { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

/* RESULT */
.result-screen { padding-top:32px; }
.result-card { background:var(--surface); border:1px solid hsla(300,20%,40%,.15); border-radius:var(--radius-lg); overflow:hidden; backdrop-filter:blur(12px); }
.result-header { text-align:center; padding:40px 24px 32px; position:relative; overflow:hidden; }
.result-header::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, hsla(320,60%,40%,.15), transparent); pointer-events:none; }
.result-label { font-size:.85rem; color:var(--text-sec); margin-bottom:16px; position:relative; }
.result-icon { font-size:64px; margin-bottom:16px; position:relative; animation:resultReveal .8s ease-out; filter:drop-shadow(0 0 24px var(--primary-glow)); }
@keyframes resultReveal { from{transform:scale(.5) rotate(-20deg);opacity:0} 60%{transform:scale(1.15) rotate(5deg)} to{transform:scale(1) rotate(0);opacity:1} }
.result-type { font-size:1.8rem; font-weight:700; margin-bottom:8px; position:relative; }
.result-subtitle { font-size:.9rem; color:var(--text-sec); position:relative; }

/* Type colors */
.type-tango .result-type { background:linear-gradient(135deg,#FF4060,#FF8040); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.type-waltz .result-type { background:linear-gradient(135deg,#60A0FF,#A080FF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.type-salsa .result-type { background:linear-gradient(135deg,#FFB020,#FF6040); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.type-ballet .result-type { background:linear-gradient(135deg,#FF80B0,#C080FF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.result-description,.result-traits,.result-chart,.result-advice,.result-compatibility { padding:24px; border-top:1px solid hsla(300,20%,40%,.1); }
.result-description p { font-size:.92rem; line-height:1.9; color:var(--text-sec); margin-bottom:12px; }
.result-description p:last-child { margin-bottom:0; }
.section-title { font-size:1rem; font-weight:700; margin-bottom:16px; }

.traits-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.traits-list li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--text-sec); padding:12px 14px; background:hsla(300,20%,25%,.3); border-radius:12px; line-height:1.6; }
.trait-icon { font-size:1.1rem; flex-shrink:0; line-height:1.6; }

.chart-area { display:flex; justify-content:center; margin-bottom:16px; }
.chart-labels { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chart-label-item { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--text-muted); }
.chart-label-dot { width:8px; height:8px; border-radius:50%; }

.advice-card { display:flex; flex-direction:column; gap:12px; }
.advice-item { display:flex; gap:10px; font-size:.88rem; color:var(--text-sec); padding:14px; background:hsla(300,20%,25%,.3); border-radius:12px; line-height:1.7; }
.advice-num { font-weight:700; color:var(--gold); flex-shrink:0; }

.compat-card { display:flex; align-items:center; gap:16px; padding:18px; background:hsla(300,20%,25%,.3); border-radius:var(--radius); border:1px solid hsla(300,20%,40%,.1); }
.compat-icon { font-size:2.5rem; flex-shrink:0; }
.compat-name { font-size:.95rem; font-weight:700; margin-bottom:4px; }
.compat-reason { font-size:.82rem; color:var(--text-sec); line-height:1.7; }

/* CTA */
.cta-area { display:flex; flex-direction:column; gap:12px; margin-top:24px; align-items:center; }
.btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 40px; font-size:1rem; font-weight:700; font-family:var(--font);
  color:#fff; background:linear-gradient(135deg, hsl(320,70%,50%), hsl(280,60%,50%));
  border:none; border-radius:var(--radius-full); cursor:pointer;
  transition:all .3s; box-shadow:0 4px 20px hsla(320,70%,50%,.3); width:100%; max-width:320px;
}
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 30px hsla(320,70%,50%,.4); }
.cta-icon { font-size:1.2rem; }
.btn-retry {
  padding:12px 32px; font-size:.88rem; font-weight:500; font-family:var(--font);
  color:var(--text-sec); background:none; border:1px solid hsla(300,20%,40%,.2);
  border-radius:var(--radius-full); cursor:pointer; transition:all .2s;
}
.btn-retry:hover { color:var(--text); border-color:hsla(300,20%,40%,.4); background:var(--surface); }

.app-footer { text-align:center; padding:24px; font-size:.72rem; color:var(--text-muted); }

@media(max-width:400px) { .hero-title{font-size:1.8rem} .result-type{font-size:1.5rem} .btn-start{padding:14px 32px;font-size:.98rem} }
@media(min-width:481px) { .screen-inner{padding:32px 24px 80px} .option-btn{padding:20px 24px} }