@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;700;900&display=swap');

:root {
    --tree-primary: #4a9b6f;
    --tree-light: #c8e6c9;
    --tree-glow: #81c784;
    --fire-primary: #e05c2a;
    --fire-light: #ffccbc;
    --fire-glow: #ff8a65;
    --earth-primary: #a07840;
    --earth-light: #f5e0b5;
    --earth-glow: #d4a95a;
    --gold-primary: #b8860b;
    --gold-light: #fff8dc;
    --gold-glow: #daa520;
    --water-primary: #4a6fa5;
    --water-light: #c5cae9;
    --water-glow: #7986cb;
    --bg-from: #f0f4ff;
    --bg-to: #fdf6ff;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-border: rgba(255, 255, 255, 0.9);
    --text-primary: #2d2d3a;
    --text-secondary: #6b6b80;
    --text-light: #9b9bb0;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --shadow-sm: 0 2px 12px rgba(80, 80, 120, .08);
    --shadow-md: 0 8px 32px rgba(80, 80, 120, .14);
    --shadow-lg: 0 20px 60px rgba(80, 80, 120, .18);
    --transition: .35s cubic-bezier(.4, 0, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background: linear-gradient(135deg, var(--bg-from) 0%, var(--bg-to) 100%);
    min-height: 100vh;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

.screen {
    display: none;
    min-height: 100vh;
    padding: 0 16px 80px;
    animation: fadeInUp .5s ease forwards
}

.screen.active {
    display: flex;
    flex-direction: column;
    align-items: center
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.particle-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: .12;
    animation: float 12s infinite
}

.particle:nth-child(1) {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #a78bfa, transparent);
    top: -100px;
    left: -100px;
    animation-delay: 0s
}

.particle:nth-child(2) {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #67e8f9, transparent);
    top: 30%;
    right: -80px;
    animation-delay: 4s
}

.particle:nth-child(3) {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #fde68a, transparent);
    bottom: 10%;
    left: 20%;
    animation-delay: 8s
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-30px) scale(1.05)
    }
}

.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1
}

/* TOP */
#screen-top {
    justify-content: center;
    padding-top: 40px
}

.top-hero {
    text-align: center;
    max-width: 480px;
    width: 100%;
    padding: 48px 32px;
    margin-top: 20px
}

.top-badge {
    display: inline-block;
    background: linear-gradient(135deg, #a78bfa, #67e8f9);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 6px 20px;
    border-radius: 50px;
    margin-bottom: 28px
}

.top-title {
    font-family: 'Zen Old Mincho', serif;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 900;
    line-height: 1.35;
    background: linear-gradient(135deg, #4a6fa5, #7c3aed, #e05c2a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px
}

.top-subtitle {
    font-size: .9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 36px
}

.top-elements {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
    flex-wrap: wrap
}

.element-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 700;
    border: 2px solid currentColor;
    transition: transform var(--transition), box-shadow var(--transition);
    cursor: default
}

.element-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm)
}

.chip-tree {
    color: var(--tree-primary);
    background: var(--tree-light)
}

.chip-fire {
    color: var(--fire-primary);
    background: var(--fire-light)
}

.chip-earth {
    color: var(--earth-primary);
    background: var(--earth-light)
}

.chip-gold {
    color: var(--gold-primary);
    background: var(--gold-light)
}

.chip-water {
    color: var(--water-primary);
    background: var(--water-light)
}

.btn-start {
    display: block;
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #7c3aed, #4a6fa5);
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(124, 58, 237, .35);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden
}

.btn-start::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent)
}

.btn-start:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(124, 58, 237, .45)
}

.btn-start:active {
    transform: translateY(0)
}

.top-note {
    margin-top: 16px;
    font-size: .8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.top-scroll-hint {
    margin-top: 40px;
    width: 100%;
    max-width: 480px
}

.element-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 24px
}

.ep-icon {
    font-size: 2rem;
    margin-bottom: 8px
}

.ep-name {
    font-size: .85rem;
    font-weight: 700
}

.ep-catch {
    font-size: .7rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4
}

/* QUIZ */
#screen-quiz {
    padding-top: 24px
}

.quiz-header {
    width: 100%;
    max-width: 520px;
    padding: 16px 0 24px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, var(--bg-from) 70%, transparent)
}

.quiz-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: .8rem;
    color: var(--text-secondary)
}

.quiz-section-label {
    font-weight: 700;
    color: var(--text-primary);
    font-size: .85rem
}

.progress-bar-outer {
    width: 100%;
    height: 8px;
    background: rgba(124, 58, 237, .12);
    border-radius: 50px;
    overflow: hidden
}

.progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #4a6fa5);
    border-radius: 50px;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    position: relative
}

.progress-bar-inner::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: rgba(255, 255, 255, .4);
    border-radius: 50px;
    animation: shimmer 1.5s infinite
}

@keyframes shimmer {

    0%,
    100% {
        opacity: .4
    }

    50% {
        opacity: 1
    }
}

.quiz-card {
    width: 100%;
    max-width: 520px;
    padding: 36px 28px;
    animation: questionIn .4s ease forwards
}

@keyframes questionIn {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.quiz-number {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 16px
}

.quiz-question {
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 700;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 28px
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.option-btn {
    padding: 18px 20px;
    border: 2px solid rgba(124, 58, 237, .15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .6);
    color: var(--text-primary);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    gap: 14px;
    align-items: center;
    position: relative;
    overflow: hidden
}

.option-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(74, 111, 165, .08));
    opacity: 0;
    transition: opacity var(--transition)
}

.option-btn:hover::before {
    opacity: 1
}

.option-btn:hover {
    border-color: rgba(124, 58, 237, .4);
    transform: translateX(4px)
}

.option-btn.selected {
    border-color: #7c3aed;
    background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(74, 111, 165, .12))
}

.option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124, 58, 237, .12);
    color: #7c3aed;
    font-size: .8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

/* RESULT */
#screen-result {
    padding-top: 32px;
    gap: 20px
}

.result-section {
    width: 100%;
    max-width: 520px
}

.result-hero {
    padding: 40px 28px;
    text-align: center;
    position: relative;
    overflow: hidden
}

.result-element-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(60px);
    opacity: .25;
    pointer-events: none
}

.result-main-icon {
    font-size: 5rem;
    margin-bottom: 12px;
    display: block;
    animation: pulseIcon 3s ease-in-out infinite
}

@keyframes pulseIcon {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

.result-element-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 50px;
    margin-bottom: 12px
}

.result-element-name {
    font-family: 'Zen Old Mincho', serif;
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 900;
    margin-bottom: 8px
}

.result-catch {
    font-size: .95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px
}

.result-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(0, 0, 0, .05);
    font-size: .8rem;
    font-weight: 600
}

.section-title {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px
}

.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, .08)
}

.personality-card {
    padding: 28px
}

.personality-desc {
    font-size: .95rem;
    line-height: 1.85;
    color: var(--text-primary)
}

.traits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px
}

.trait-box {
    padding: 16px;
    border-radius: var(--radius-sm);
    font-size: .82rem
}

.trait-box.pros {
    background: rgba(74, 155, 111, .1);
    border-left: 3px solid var(--tree-primary)
}

.trait-box.cons {
    background: rgba(224, 92, 42, .1);
    border-left: 3px solid var(--fire-primary)
}

.trait-label {
    font-weight: 800;
    font-size: .7rem;
    letter-spacing: .1em;
    margin-bottom: 8px;
    color: var(--text-secondary)
}

.trait-list {
    list-style: none
}

.trait-list li {
    padding: 3px 0
}

.trait-list li::before {
    content: '• '
}

.radar-card {
    padding: 28px
}

#radar-canvas {
    display: block;
    margin: 0 auto;
    max-width: 280px;
    width: 100%
}

.advice-card {
    padding: 28px;
    position: relative;
    overflow: hidden
}

.advice-deco {
    position: absolute;
    font-size: 8rem;
    opacity: .04;
    right: -20px;
    top: -20px;
    line-height: 1;
    pointer-events: none
}

.advice-text {
    font-size: 1.05rem;
    line-height: 1.9;
    font-weight: 500;
    color: var(--text-primary)
}

.lucky-card {
    padding: 28px
}

.lucky-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.lucky-item {
    padding: 16px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .03);
    text-align: center
}

.lucky-icon {
    font-size: 1.8rem;
    margin-bottom: 8px
}

.lucky-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 4px
}

.lucky-value {
    font-size: .9rem;
    font-weight: 700
}

.bio-card {
    padding: 28px
}

.bio-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px
}

.bio-icon {
    font-size: 2.5rem
}

.bio-text {
    flex: 1
}

.bio-phase {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px
}

.bio-desc {
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.6
}

.bio-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 60px;
    margin-top: 16px
}

.bio-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height .8s cubic-bezier(.4, 0, .2, 1)
}

.bio-bar.today {
    outline: 2px solid rgba(0, 0, 0, .15);
    outline-offset: 2px
}

.bio-day {
    font-size: .6rem;
    text-align: center;
    margin-top: 4px;
    color: var(--text-light)
}

.compat-card {
    padding: 28px
}

.compat-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.compat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, .03)
}

.compat-icon {
    font-size: 1.8rem
}

.compat-info {
    flex: 1
}

.compat-name {
    font-weight: 700;
    font-size: .9rem
}

.compat-rel {
    font-size: .75rem;
    color: var(--text-secondary);
    margin-top: 3px
}

.compat-stars {
    font-size: 1rem;
    letter-spacing: 2px
}

.share-card {
    padding: 28px
}

.share-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.btn-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition)
}

.btn-share:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm)
}

.btn-x {
    background: #000;
    color: #fff
}

.btn-ig {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff
}

.btn-dl {
    background: rgba(0, 0, 0, .07);
    color: var(--text-primary)
}

#share-canvas {
    display: none
}

.affiliate-card {
    padding: 28px
}

.aff-note {
    font-size: .7rem;
    color: var(--text-light);
    margin-bottom: 16px
}

.aff-grid {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.aff-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .5);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition), box-shadow var(--transition)
}

.aff-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm)
}

.aff-img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(0, 0, 0, .04)
}

.aff-body {
    flex: 1
}

.aff-tag {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: .1em;
    margin-bottom: 4px
}

.aff-name {
    font-size: .88rem;
    font-weight: 700
}

.aff-price {
    font-size: .75rem;
    color: var(--text-secondary);
    margin-top: 3px
}

.aff-cta {
    font-size: .75rem;
    background: rgba(124, 58, 237, .1);
    color: #7c3aed;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 700;
    flex-shrink: 0
}

.btn-retry {
    width: 100%;
    max-width: 520px;
    padding: 18px;
    border: 2px solid rgba(124, 58, 237, .3);
    border-radius: var(--radius-md);
    background: transparent;
    color: #7c3aed;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition)
}

.btn-retry:hover {
    background: rgba(124, 58, 237, .06);
    border-color: #7c3aed
}

.btn-home {
    width: 100%;
    max-width: 520px;
    padding: 18px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 12px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-home:hover {
    background: rgba(0, 0, 0, 0.1);
}

.theme-tree {
    --accent: var(--tree-primary);
    --accent-light: var(--tree-light);
    --accent-glow: var(--tree-glow)
}

.theme-fire {
    --accent: var(--fire-primary);
    --accent-light: var(--fire-light);
    --accent-glow: var(--fire-glow)
}

.theme-earth {
    --accent: var(--earth-primary);
    --accent-light: var(--earth-light);
    --accent-glow: var(--earth-glow)
}

.theme-gold {
    --accent: var(--gold-primary);
    --accent-light: var(--gold-light);
    --accent-glow: var(--gold-glow)
}

.theme-water {
    --accent: var(--water-primary);
    --accent-light: var(--water-light);
    --accent-glow: var(--water-glow)
}

@media(min-width:600px) {
    .share-buttons {
        flex-direction: row
    }

    .btn-share {
        flex: 1;
        flex-direction: column;
        padding: 20px
    }
}

@media(max-width:480px) {
    .lucky-grid {
        grid-template-columns: 1fr 1fr
    }

    .element-preview {
        grid-template-columns: 1fr 1fr
    }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--bg-from), var(--bg-to));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fadeOutOverlay .5s ease 1.2s forwards
}

@keyframes fadeOutOverlay {
    to {
        opacity: 0;
        pointer-events: none
    }
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(124, 58, 237, .15);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin .8s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.loading-text {
    font-size: .85rem;
    color: var(--text-secondary)
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, .2);
    border-radius: 3px
}

/* ── 詳細セクション（アコーディオン）───────── */
.details-card {
    padding: 20px
}

.accordion-trigger {
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: rgba(0, 0, 0, .03);
    border-radius: var(--radius-sm);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-primary);
    transition: background var(--transition);
    -webkit-tap-highlight-color: rgba(124, 58, 237, .15);
    touch-action: manipulation
}

.accordion-trigger:hover {
    background: rgba(124, 58, 237, .07)
}

.accordion-trigger.open {
    background: rgba(124, 58, 237, .08);
    color: #7c3aed
}

.accordion-arrow {
    font-size: 1rem;
    transition: transform var(--transition);
    pointer-events: none
}

.accordion-trigger.open .accordion-arrow {
    transform: rotate(180deg)
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1);
    margin-bottom: 8px
}

.accordion-content.open {
    max-height: 1000px
}

.detail-text {
    font-size: .9rem;
    line-height: 1.85;
    color: var(--text-primary);
    padding: 16px 20px
}

/* ── 有名人チップ ──────────────────────── */
.famous-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px
}

.famous-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-primary)
}

.famous-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

/* ── 今月のテーマ ──────────────────────── */
.monthly-card {
    padding: 28px
}

.monthly-note {
    font-size: .7rem;
    color: var(--text-light);
    font-weight: 400;
    margin-left: 8px
}

.monthly-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px
}

.monthly-keyword {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 900;
    padding: 8px 24px;
    border-radius: 50px;
    letter-spacing: .05em;
    align-self: flex-start
}

.monthly-theme-text {
    font-size: .95rem;
    line-height: 1.85;
    color: var(--text-primary)
}

/* ── バーナム深層リーディング ─────────────────── */
.barnum-card {
    padding: 28px;
    position: relative;
    overflow: hidden
}

.barnum-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, .04), rgba(74, 111, 165, .04));
    pointer-events: none
}

.barnum-subtitle {
    font-size: .78rem;
    color: var(--text-light);
    margin-bottom: 24px;
    font-style: italic
}

.barnum-reading {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px
}

.barnum-para {
    font-size: .93rem;
    line-height: 1.95;
    color: var(--text-primary);
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    position: relative
}

.barnum-para-1 {
    background: rgba(124, 58, 237, .04);
    border-left: 3px solid rgba(124, 58, 237, .3)
}

.barnum-para-2 {
    background: rgba(74, 155, 111, .04);
    border-left: 3px solid rgba(74, 155, 111, .3)
}

.barnum-para-3 {
    background: rgba(224, 92, 42, .04);
    border-left: 3px solid rgba(224, 92, 42, .3)
}

.barnum-para-4 {
    background: rgba(184, 134, 11, .04);
    border-left: 3px solid rgba(184, 134, 11, .3)
}

.barnum-para-5 {
    background: linear-gradient(135deg, rgba(124, 58, 237, .07), rgba(74, 111, 165, .07));
    border-left: 3px solid #7c3aed;
    font-weight: 600;
    font-size: .95rem
}

/* スコア分布バー */
.barnum-score-section {
    margin-top: 4px
}

.barnum-score-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 14px;
    text-transform: uppercase
}

.barnum-score-bar {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.score-bar-row {
    display: grid;
    grid-template-columns: 52px 1fr 36px;
    align-items: center;
    gap: 10px
}

.score-bar-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-secondary)
}

.score-bar-track {
    height: 8px;
    background: rgba(0, 0, 0, .06);
    border-radius: 50px;
    overflow: hidden
}

.score-bar-fill {
    height: 100%;
    border-radius: 50px;
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
}

.score-bar-pct {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: right
}

/* ── 生年月日入力フォーム ────────────────────────── */
.birth-form {
    margin: 20px 0;
    padding: 20px;
    background: rgba(124, 58, 237, .04);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(124, 58, 237, .1)
}

.birth-form-title {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #7c3aed;
    margin-bottom: 14px;
    text-align: left
}

.birth-selects {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.birth-select {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border: 1.5px solid rgba(124, 58, 237, .2);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .9);
    color: var(--text-primary);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .88rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c3aed' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color var(--transition)
}

.birth-select:focus {
    outline: none;
    border-color: #7c3aed
}

.gender-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.gender-btn {
    padding: 8px 16px;
    border: 1.5px solid rgba(124, 58, 237, .2);
    border-radius: 50px;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition)
}

.gender-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed
}

.gender-btn.selected {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #fff
}

/* ── 生年月日鑑定カード ──────────────────────────── */
.birth-card {
    padding: 28px
}

.birth-reading-content {}

.birth-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px
}

@media(max-width:420px) {
    .birth-trio {
        grid-template-columns: 1fr
    }
}

.birth-item {
    background: rgba(0, 0, 0, .03);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center
}

.birth-icon {
    font-size: 2rem;
    margin-bottom: 8px
}

.birth-item-label {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase
}

.birth-item-value {
    font-size: .88rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px
}

.birth-item-keyword {
    font-size: .72rem;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 6px
}

.birth-item-desc {
    font-size: .75rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left
}

.birth-summary {
    font-size: .88rem;
    line-height: 1.85;
    color: var(--text-primary);
    padding: 16px;
    background: rgba(124, 58, 237, .04);
    border-radius: var(--radius-sm);
    border-left: 3px solid #7c3aed
}

/* ── 総合鑑定カード ──────────────────────────────── */
.combined-card {
    padding: 28px;
    position: relative;
    overflow: hidden
}

.combined-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, .05), rgba(220, 38, 38, .04));
    pointer-events: none
}

.combined-subtitle {
    font-size: .78rem;
    color: var(--text-light);
    margin-bottom: 24px;
    font-style: italic
}

.combined-reading-content {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.combined-para {
    font-size: .93rem;
    line-height: 1.95;
    color: var(--text-primary);
    padding: 18px 20px;
    border-radius: var(--radius-sm)
}

.combined-para-1 {
    background: rgba(124, 58, 237, .05);
    border-left: 3px solid #7c3aed
}

.combined-para-2 {
    background: rgba(220, 38, 38, .04);
    border-left: 3px solid #dc2626
}

.combined-para-3 {
    background: rgba(180, 83, 9, .04);
    border-left: 3px solid #b45309
}

.combined-para-4 {
    background: rgba(74, 155, 111, .04);
    border-left: 3px solid #4a9b6f
}

.combined-para-5 {
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(74, 111, 165, .08));
    border-left: 3px solid #7c3aed;
    font-weight: 600;
    font-size: .95rem
}

/* ── 境界タイプバッジ ────────────────────────────── */
.borderline-badge {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(220, 38, 38, .06));
    border: 1.5px dashed rgba(124, 58, 237, .35);
    font-size: .83rem;
    line-height: 1.75;
    color: var(--text-primary);
    font-weight: 500;
    text-align: left
}

/* ── 干支×月 月運勢ボックス ─────────────────────── */
.monthly-zodiac-box {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(180, 83, 9, .04), rgba(124, 58, 237, .04));
    border-left: 3px solid #b45309
}

.monthly-zodiac-title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #b45309;
    margin-bottom: 10px
}

.monthly-zodiac-text {
    font-size: .88rem;
    line-height: 1.85;
    color: var(--text-primary);
    margin-bottom: 8px
}

.monthly-zodiac-note {
    font-size: .68rem;
    color: var(--text-light);
    font-style: italic
}

/* ── Ofuse 応援ボタン ────────────────────────────── */
.ofuse-card {
    padding: 28px;
    text-align: center;
}

.ofuse-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-ofuse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(255, 117, 140, 0.35);
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-ofuse::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
}

.btn-ofuse:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(255, 117, 140, 0.45);
}

.btn-ofuse:active {
    transform: translateY(0);
}