/* =============================================
   lovinweb.com / check/ 共通スタイル
   Light pastel glassmorphism design
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-from: #f0e6ff;
  --bg-mid:  #fce4f0;
  --bg-to:   #e8f0ff;
  --accent:  #7C3AED;
  --accent2: #EC4899;
  --card-bg: rgba(255,255,255,0.72);
  --card-border: rgba(255,255,255,0.85);
  --text:    #1a0533;
  --text-sub:#4b3a6b;
  --muted:   #8b7aa8;
  --shadow:  rgba(124,58,237,0.12);
}

html,body{height:100%;font-family:'M PLUS Rounded 1c','Hiragino Maru Gothic Pro','Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;color:var(--text)}
body{
  background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
  min-height:100vh;overflow-x:hidden;
}

/* 星パーティクルCanvas */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Layout */
.page-wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding:0 16px 52px;max-width:480px;margin:0 auto;width:100%}

/* Header */
.site-header{
  padding:14px 20px;display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);flex-wrap:wrap;
}
.site-header a{color:inherit;text-decoration:none;transition:color .2s}
.site-header a:hover{color:var(--accent)}
.site-header .sep{opacity:.5}

/* White glass card */
.glass{
  background: var(--card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  box-shadow: 0 8px 40px var(--shadow), 0 2px 8px rgba(0,0,0,0.04);
}

/* ======= INTRO ======= */
.intro-card{padding:40px 28px 36px;text-align:center;margin-top:12px}

.app-icon{
  font-size:80px;display:block;margin-bottom:16px;
  filter: drop-shadow(0 6px 20px rgba(124,58,237,0.30));
  animation: float 4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.intro-title{
  font-size:26px;font-weight:900;margin-bottom:10px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.3;
}
.intro-sub{
  font-size:14px;color:var(--text-sub);line-height:1.85;margin-bottom:22px;
}
.intro-badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.badge{
  background: linear-gradient(135deg,rgba(124,58,237,0.09),rgba(236,72,153,0.09));
  border:1px solid rgba(124,58,237,0.18);
  border-radius:100px;padding:6px 14px;font-size:12px;
  color:var(--accent);font-weight:600;
}

.btn-start{
  display:block;width:100%;padding:18px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:16px;font-weight:800;
  border:none;border-radius:100px;cursor:pointer;
  box-shadow: 0 10px 36px rgba(124,58,237,0.38);
  transition:transform .2s,box-shadow .2s;
  letter-spacing:.5px;font-family:inherit;
}
.btn-start:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(124,58,237,0.5)}
.btn-start:active{transform:scale(.97)}

/* ======= PROGRESS ======= */
.progress-wrap{margin:10px 0 16px}
.progress-meta{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600;
}
.progress-track{
  height:8px;background:rgba(124,58,237,0.1);
  border-radius:100px;overflow:hidden;
}
.progress-bar{
  height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* ======= QUESTION CARD ======= */
.q-card{padding:28px 24px;margin-bottom:14px}
.q-num{
  display:inline-block;margin-bottom:12px;
  font-size:10px;font-weight:800;letter-spacing:2.5px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.q-text{font-size:18px;font-weight:800;line-height:1.6;color:var(--text);margin-bottom:20px}

/* Choice buttons */
.choices{display:flex;flex-direction:column;gap:10px}
.choice-btn{
  background:#fff;
  border:2px solid rgba(124,58,237,0.12);
  border-radius:18px;
  color:var(--text-sub);
  padding:15px 18px;
  font-size:14px;font-family:inherit;
  text-align:left;cursor:pointer;
  transition:all .22s;line-height:1.5;font-weight:500;
  box-shadow:0 2px 12px rgba(124,58,237,0.06);
}
.choice-btn:hover{
  background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(236,72,153,0.06));
  border-color:rgba(124,58,237,0.35);
  color:var(--accent);
  transform:translateX(5px);
  box-shadow:0 4px 20px rgba(124,58,237,0.15);
}
.choice-btn.selected{
  background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(236,72,153,0.12));
  border-color:var(--accent);color:var(--accent);
  transform:translateX(5px);
}
.choice-btn:disabled{cursor:default}

/* ======= RESULT ======= */
.result-hero{
  text-align:center;padding:38px 28px 30px;
  position:relative;overflow:hidden;
}
.result-hero::before{
  content:'';position:absolute;inset:-40px;
  background:radial-gradient(circle at 50% 50%,rgba(124,58,237,0.12),transparent 70%);
  pointer-events:none;
}

/* アイコンOrb */
.result-icon-orb{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:132px;border-radius:50%;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:
    0 0 0 7px rgba(255,255,255,0.75),
    0 0 0 11px rgba(124,58,237,0.18),
    0 18px 56px rgba(0,0,0,0.22);
  margin-bottom:22px;
  animation:float 4s ease-in-out infinite;
  position:relative;z-index:1;
}
.result-icon-orb::after{
  content:'';
  position:absolute;inset:-5px;border-radius:50%;
  border:2px dashed rgba(255,255,255,0.45);
  animation:orbSpin 14s linear infinite;
}
@keyframes orbSpin{to{transform:rotate(360deg)}}

.result-emoji{
  font-size:62px;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.result-type-badge{
  display:inline-block;margin-bottom:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border-radius:100px;
  padding:5px 18px;font-size:11px;font-weight:800;letter-spacing:1.5px;
  position:relative;z-index:1;
}
.result-name{
  font-size:32px;font-weight:900;margin-bottom:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;position:relative;z-index:1;
}
.result-catch{font-size:14px;color:var(--text-sub);position:relative;z-index:1}

/* Section cards */
.section-card{padding:24px 22px;margin-bottom:14px}
.section-label{
  font-size:11px;font-weight:800;letter-spacing:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:14px;display:block;
}
.result-desc{font-size:14px;line-height:2;color:var(--text-sub)}

/* Trait bars */
.trait-row{margin-bottom:14px}
.trait-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--text-sub);margin-bottom:6px;font-weight:600}
.trait-pct{color:var(--accent);font-weight:700}
.trait-track{height:10px;background:rgba(124,58,237,0.09);border-radius:100px;overflow:hidden}
.trait-fill{
  height:100%;border-radius:100px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 8px rgba(124,58,237,0.3);
}

/* Share buttons */
.share-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.share-btn{
  display:flex;align-items:center;gap:6px;
  padding:12px 20px;border-radius:100px;
  font-size:13px;font-weight:700;cursor:pointer;
  border:none;font-family:inherit;
  transition:transform .2s,box-shadow .2s;
}
.share-btn:hover{transform:translateY(-2px)}
.share-btn.x-btn{background:#000;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,0.2)}
.share-btn.line-btn{background:#06C755;color:#fff;box-shadow:0 4px 14px rgba(6,199,85,0.3)}
.share-btn.copy-btn{
  background:#fff;color:var(--accent);
  border:2px solid rgba(124,58,237,0.2);
  box-shadow:0 4px 14px rgba(124,58,237,0.1);
}

/* Related links */
.related-list{display:flex;flex-direction:column;gap:10px}
.related-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:#fff;
  border:1.5px solid rgba(124,58,237,0.1);
  border-radius:18px;color:var(--text-sub);
  text-decoration:none;font-size:13.5px;font-weight:600;
  transition:all .2s;
  box-shadow:0 2px 10px rgba(124,58,237,0.05);
}
.related-item:hover{
  background:linear-gradient(135deg,rgba(124,58,237,0.05),rgba(236,72,153,0.05));
  border-color:rgba(124,58,237,0.3);color:var(--accent);
  transform:translateX(5px);box-shadow:0 4px 18px rgba(124,58,237,0.12);
}
.related-item .ri{font-size:24px}

/* Retry button */
.btn-retry{
  display:block;width:100%;padding:15px;
  background:#fff;
  border:2px solid rgba(124,58,237,0.2);
  color:var(--accent);font-size:14px;font-weight:700;
  border-radius:100px;cursor:pointer;
  transition:all .2s;font-family:inherit;margin-bottom:14px;
  box-shadow:0 3px 14px rgba(124,58,237,0.08);
}
.btn-retry:hover{background:rgba(124,58,237,0.05);border-color:var(--accent)}

/* AdSense */
.ad-wrap{margin:18px 0}
/* 未配信時はカード間隔と同じ余白のみ残す */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ad-wrap:has(ins[data-ad-status="unfilled"]){margin:0 0 14px!important;min-height:0!important}

/* Footer */
.site-footer{
  text-align:center;padding:22px 16px;
  font-size:12px;color:var(--muted);
  border-top:1px solid rgba(124,58,237,0.1);margin-top:8px;
}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:var(--accent)}

/* Loading dots */
.loading-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.loading-dots span{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  animation:dotBounce 1.2s ease-in-out infinite;
  opacity:.7;
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,80%,100%{transform:scale(0.6);opacity:.4}40%{transform:scale(1.1);opacity:1}}

/* Animations */
.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}