/* =========================================================================
   ふたりのいろ — FUTARI no IRO （おもしろ・気軽）
   宇宙ベースに、色彩がにじむ遊び心を。
   ========================================================================= */
:root {
  --accent: #36d6c3;
  --accent-2: #f7567c;
  --accent-soft: rgba(54, 214, 195, 0.16);
  --glow: 0 0 50px rgba(54, 214, 195, 0.3);
}

.iro-mark { display: inline-flex; align-items: center; gap: 12px; }
.iro-mark .blob {
  width: 30px; height: 30px; border-radius: 46% 54% 60% 40% / 50% 46% 54% 50%;
  background: conic-gradient(from 0deg, #f7567c, #f7c948, #36d6c3, #5b8def, #b58bff, #f7567c);
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0%,100% { border-radius: 46% 54% 60% 40% / 50% 46% 54% 50%; transform: rotate(0); }
  50% { border-radius: 60% 40% 40% 60% / 54% 60% 40% 46%; transform: rotate(180deg); }
}
.iro-mark .name { font-family: var(--serif); font-weight: 800; letter-spacing: 0.1em; font-size: 1.08rem; }
.iro-mark .name small { display: block; font-family: var(--display); letter-spacing: 0.28em; font-size: 0.54rem; color: var(--accent); }

/* ---- Hero ---- */
.i-hero { text-align: center; padding: clamp(50px, 8vw, 100px) 0 clamp(24px, 4vw, 48px); }
.i-orbs { position: relative; height: clamp(120px, 22vw, 180px); margin-bottom: 6px; }
.i-orb { position: absolute; top: 50%; border-radius: 50%; filter: blur(2px); mix-blend-mode: screen; animation: bob 6s ease-in-out infinite; }
.i-orb.a { left: calc(50% - 90px); width: 130px; height: 130px; background: radial-gradient(circle at 35% 35%, #6ff5e6, #36d6c3 60%, transparent 75%); transform: translateY(-50%); }
.i-orb.b { left: calc(50% - 40px); width: 130px; height: 130px; background: radial-gradient(circle at 35% 35%, #ff9ab4, #f7567c 60%, transparent 75%); transform: translateY(-50%); animation-delay: -3s; }
@keyframes bob { 0%,100% { margin-top: -8px; } 50% { margin-top: 8px; } }

.i-hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(2rem, 6vw, 3.3rem); margin: 4px 0 6px; letter-spacing: 0.06em; }
.i-hero .sub { color: var(--ink-soft); max-width: 48ch; margin: 12px auto 0; }

/* ---- Form ---- */
.i-form-wrap { max-width: 660px; margin: clamp(18px,4vw,38px) auto 0; padding: clamp(24px,4vw,40px); border-radius: var(--r-xl); }
.i-names { display: grid; gap: 18px; grid-template-columns: 1fr auto 1fr; align-items: end; }
.i-heart { align-self: center; font-size: 1.6rem; color: var(--accent-2); padding-bottom: 10px; }
.i-field label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 7px; }
.i-field input {
  width: 100%; padding: 0.9em 1em; border-radius: var(--r-sm);
  background: rgba(0,0,0,0.25); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; text-align: center; transition: border-color 0.2s, box-shadow 0.2s;
}
.i-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.i-submit { text-align: center; margin-top: 24px; }
.i-note { color: var(--ink-faint); font-size: 0.76rem; margin-top: 12px; }

/* ---- Casting ---- */
.i-casting { text-align: center; padding: 56px 0; display: none; }
.i-casting.on { display: block; }
.i-mixer { width: 90px; height: 90px; margin: 0 auto 20px; border-radius: 50%; background: conic-gradient(from 0deg, #f7567c, #f7c948, #36d6c3, #5b8def, #b58bff, #f7567c); animation: spin 1.1s linear infinite; filter: blur(1px); }
@keyframes spin { to { transform: rotate(360deg); } }
.i-casting p { font-family: var(--serif); color: var(--accent); letter-spacing: 0.08em; }

/* ---- Result ---- */
.i-result { display: none; }
.i-result.on { display: block; }
.i-score-card { text-align: center; padding: clamp(32px,5vw,52px); border-radius: var(--r-xl); position: relative; overflow: hidden; }
.i-blend-bg { position: absolute; inset: 0; opacity: 0.22; filter: blur(40px); }
.i-score-card > * { position: relative; }
.i-verdict-en { font-family: var(--display); letter-spacing: 0.28em; font-size: 0.74rem; color: var(--accent); }
.i-verdict { font-family: var(--serif); font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.6rem); margin: 8px 0 16px; }
.i-score-num { font-family: var(--serif); font-weight: 800; font-size: clamp(3rem, 11vw, 5rem); line-height: 1; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(120deg, #fff, var(--accent) 50%, var(--accent-2)); }
.i-score-num small { font-size: 0.3em; -webkit-text-fill-color: var(--ink-soft); }

.i-swatches { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 24px 0 8px; flex-wrap: wrap; }
.i-sw { text-align: center; }
.i-sw .chip { width: 78px; height: 78px; border-radius: 24px; margin: 0 auto 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.2); }
.i-sw .nm { font-family: var(--serif); font-size: 0.98rem; }
.i-sw .tp { font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; }
.i-plus { font-size: 1.5rem; color: var(--ink-soft); }
.i-sw.blend .chip { width: 96px; height: 96px; border-radius: 28px; }
.i-sw.blend .lab { font-family: var(--display); letter-spacing: 0.2em; font-size: 0.6rem; color: var(--accent); }

.i-detail { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; }
.i-block { padding: 24px; border-radius: var(--r-md); text-align: left; }
.i-block h4 { font-family: var(--serif); font-size: 1.06rem; margin: 0 0 10px; color: var(--accent); }
.i-block p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.85; margin: 0; }
.i-keyword { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 100px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.84rem; }

.i-actions { text-align: center; margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 620px) {
  .i-names { grid-template-columns: 1fr; }
  .i-heart { display: none; }
}