*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans JP',sans-serif;background:#0a0a0f;color:#e8e0d0;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(120,90,30,.3),transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(100,70,20,.2),transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(80,60,20,.15),transparent 60%);z-index:-1}

.screen{display:none;min-height:100vh;animation:fadeIn .5s ease}.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes countUp{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(212,175,55,.2),0 0 60px rgba(212,175,55,.1)}50%{box-shadow:0 0 30px rgba(212,175,55,.4),0 0 80px rgba(212,175,55,.15)}}
@keyframes floatQ{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}

/* ===== START SCREEN ===== */
.start-container{max-width:600px;margin:0 auto;padding:60px 20px;text-align:center}
.gold-emblem{font-size:48px;margin-bottom:12px;animation:slideUp .5s ease;filter:drop-shadow(0 0 20px rgba(212,175,55,.5))}
.title-gradient{font-size:clamp(32px,7vw,52px);font-weight:900;background:linear-gradient(135deg,#d4af37,#f5d060,#d4af37,#b8860b);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.3;margin-bottom:10px;animation:slideUp .6s ease,shimmer 4s ease infinite}
.subtitle{font-size:17px;color:#a09880;margin-bottom:36px;animation:slideUp .7s ease}

.highlight-gold{color:#f5d060;font-weight:700}

/* Hero Chart */
.hero-chart-wrapper{position:relative;width:300px;height:300px;margin:0 auto 32px;animation:slideUp .8s ease}
.hero-chart-ring{width:260px;height:260px;margin:20px auto 0;position:relative;border-radius:50%;border:2px solid rgba(212,175,55,.25);animation:glow 3s ease infinite}
.hero-chart-ring canvas{display:block;margin:0 auto}
.hero-chart-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:floatQ 3s ease infinite}
.hero-q{font-size:42px;font-weight:900;background:linear-gradient(135deg,#d4af37,#f5d060);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.hero-chart-labels{position:absolute;inset:0}
.hcl{position:absolute;font-size:12px;font-weight:700;color:#d4af37;white-space:nowrap}

.hero-desc{font-size:15px;color:#b0a890;line-height:1.9;margin-bottom:32px;animation:slideUp .9s ease}

.glass-card{background:rgba(212,175,55,.04);border:1px solid rgba(212,175,55,.12);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.btn-start{background:linear-gradient(135deg,#d4af37,#f5d060,#d4af37);background-size:200% 100%;color:#0a0a0f;border:none;padding:18px 64px;border-radius:50px;font-size:18px;font-weight:700;cursor:pointer;transition:.3s;box-shadow:0 0 30px rgba(212,175,55,.3);animation:slideUp 1s ease,shimmer 3s ease infinite;font-family:inherit}
.btn-start:hover{transform:scale(1.05);box-shadow:0 0 50px rgba(212,175,55,.5)}
.note{font-size:12px;color:#666;margin-top:12px}

/* ===== QUIZ HEADER ===== */
.quiz-header{padding:20px 24px 0;text-align:center;max-width:700px;margin:0 auto}
.header-title{font-size:20px;font-weight:700}
.header-text-gradient{background:linear-gradient(90deg,#d4af37,#f5d060);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-sub{font-size:13px;color:#888;margin:4px 0 16px}
.progress-wrapper{margin-bottom:10px}
.progress-bar{background:rgba(255,255,255,.08);border-radius:6px;height:6px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#b8860b,#d4af37,#f5d060);border-radius:6px;transition:width .4s ease}
.step-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#555}
.step-label.active{color:#d4af37}.step-label.done{color:#f5d060}

/* ===== QUIZ BODY ===== */
.quiz-body{max-width:650px;margin:0 auto;padding:20px}
.question-counter{display:inline-block;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.25);border-radius:20px;padding:6px 20px;font-size:13px;color:#d4af37;margin:30px auto 20px;display:block;width:fit-content}
.question-text{font-size:clamp(20px,4vw,26px);font-weight:700;text-align:center;margin-bottom:28px;line-height:1.5}
.options-list{display:flex;flex-direction:column;gap:12px}
.option-btn{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.03);border:1px solid rgba(212,175,55,.1);border-radius:14px;padding:18px 20px;cursor:pointer;transition:.3s;text-align:left}
.option-btn:hover{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.4);transform:translateX(4px)}
.option-letter{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(184,134,11,.25));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;color:#f5d060}
.option-content strong{display:block;font-size:15px;margin-bottom:2px}.option-content small{font-size:12px;color:#888}

/* ===== INFO SCREEN ===== */
.info-card{padding:32px;margin-top:30px}
.info-title{font-size:22px;font-weight:700;margin-bottom:8px;text-align:center}
.info-desc{font-size:13px;color:#888;text-align:center;margin-bottom:24px}
.form-row{display:flex;gap:12px;margin-bottom:16px}.form-row.triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-group{flex:1}.form-group label{display:block;font-size:12px;color:#888;margin-bottom:6px}
.form-group input,.form-group select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.15);border-radius:10px;padding:12px 14px;color:#e8e0d0;font-size:14px;font-family:inherit;outline:none;transition:.3s}
.form-group input:focus,.form-group select:focus{border-color:#d4af37;box-shadow:0 0 10px rgba(212,175,55,.2)}
.form-group select option{background:#1a1a1e;color:#e8e0d0}
.gender-buttons{display:flex;gap:10px}
.gender-btn{flex:1;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#e8e0d0;font-size:14px;cursor:pointer;transition:.3s;font-family:inherit}
.gender-btn:hover{border-color:#d4af37}.gender-btn.selected{background:rgba(212,175,55,.12);border-color:#d4af37;color:#d4af37;font-weight:700}
.btn-analyze{width:100%;margin-top:24px;padding:16px;background:linear-gradient(135deg,#b8860b,#d4af37,#f5d060);color:#0a0a0f;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:.3s;font-family:inherit}
.btn-analyze:hover{transform:scale(1.02);box-shadow:0 0 30px rgba(212,175,55,.4)}

/* ===== ANALYSIS SCREEN ===== */
.analysis-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;text-align:center}
.analysis-spinner{width:80px;height:80px;border:4px solid rgba(255,255,255,.08);border-top-color:#d4af37;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:30px}
.analysis-title{font-size:24px;font-weight:700;margin-bottom:8px}
.analysis-sub{font-size:14px;color:#888;margin-bottom:40px}
.analysis-steps{text-align:left;max-width:300px}
.a-step{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px;color:#555;transition:color .4s}
.a-step.active{color:#d4af37}.a-step.done{color:#f5d060}
.a-dot{width:10px;height:10px;border-radius:50%;background:#333;transition:.4s;flex-shrink:0}
.a-step.active .a-dot{background:#d4af37;box-shadow:0 0 10px rgba(212,175,55,.5)}
.a-step.done .a-dot{background:#f5d060}

/* ===== RESULT SCREEN ===== */
.result-body{max-width:650px;margin:0 auto;padding:20px 20px 60px}
.result-score-section{text-align:center;padding:40px 20px}
.result-label{font-size:14px;color:#888;margin-bottom:12px}
.score-display{display:flex;align-items:baseline;justify-content:center;gap:4px}
.score-number{font-size:80px;font-weight:900;background:linear-gradient(135deg,#d4af37,#f5d060,#e8c252);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:countUp .8s ease}
.score-unit{font-size:24px;font-weight:700;color:#d4af37}
.score-rank{display:inline-block;padding:8px 24px;border-radius:20px;font-size:14px;font-weight:700;margin-top:12px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.25);color:#d4af37}
.result-type-section{padding:28px;margin-bottom:20px}
.result-type-section h3{font-size:18px;margin-bottom:6px}.result-type-section .type-name{font-size:24px;font-weight:900;color:#f5d060;margin-bottom:12px}
.result-type-section p{font-size:14px;line-height:1.8;color:#bbb}

.radar-section{padding:28px;margin-bottom:20px;text-align:center}
.radar-section h3{margin-bottom:20px;font-size:16px}
.radar-section canvas{max-width:100%;margin:0 auto}
.category-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;text-align:left}
.cat-score-item{display:flex;align-items:center;gap:10px;font-size:13px}
.cat-score-bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.cat-score-fill{height:100%;border-radius:4px;transition:width 1.5s ease}

.advice-section{padding:28px;margin-bottom:20px}
.advice-section h3{font-size:16px;margin-bottom:16px}
.advice-item{padding:14px;background:rgba(212,175,55,.04);border-radius:10px;margin-bottom:10px;border-left:3px solid #d4af37}
.advice-item strong{display:block;font-size:14px;color:#d4af37;margin-bottom:4px}
.advice-item p{font-size:13px;color:#aaa;line-height:1.6}

.cta-section{padding:28px;margin-bottom:20px;text-align:center}
.cta-section h3{margin-bottom:8px}
.cta-section p{font-size:13px;color:#888;margin-bottom:18px}
.btn-cta{background:linear-gradient(135deg,#d4af37,#f5d060);color:#0a0a0f;border:none;padding:14px 40px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:.3s;font-family:inherit}
.btn-cta:hover{transform:scale(1.04);box-shadow:0 0 30px rgba(212,175,55,.4)}
.btn-retry{display:block;margin:0 auto;background:none;border:1px solid rgba(212,175,55,.15);color:#888;padding:12px 32px;border-radius:10px;font-size:14px;cursor:pointer;transition:.3s;font-family:inherit}
.btn-retry:hover{border-color:#d4af37;color:#d4af37}

@media(max-width:600px){
  .start-container{padding:40px 16px}
  .hero-chart-wrapper{width:260px;height:260px}
  .hero-chart-ring{width:220px;height:220px}
  .hero-chart-ring canvas{width:220px;height:220px}
  .category-scores{grid-template-columns:1fr}
}