/* StarLab Horoscopes - 幻想星空UI */

/* ============================================
   ベース・背景
   ============================================ */

.starlab-form-container,
.starlab-result-container {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1a3e 50%, #2d1b3d 100%);
    overflow: hidden;
    padding: 40px 20px;
}

/* 星空背景アニメーション */
.starlab-stars-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.starlab-stars-background::before,
.starlab-stars-background::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        100px 200px #fff,
        300px 150px #fff,
        500px 300px rgba(255, 255, 255, 0.8),
        700px 100px rgba(255, 255, 255, 0.6),
        900px 250px rgba(255, 255, 255, 0.7),
        1200px 180px rgba(255, 255, 255, 0.9),
        1400px 350px rgba(255, 255, 255, 0.5),
        800px 400px rgba(255, 255, 255, 0.8),
        600px 450px rgba(255, 255, 255, 0.6),
        1100px 500px rgba(255, 255, 255, 0.7),
        200px 550px rgba(255, 255, 255, 0.9),
        400px 600px rgba(255, 255, 255, 0.5),
        1600px 150px rgba(255, 255, 255, 0.8),
        1800px 320px rgba(255, 255, 255, 0.6);
    animation: starlab-twinkle 8s infinite ease-in-out;
}

.starlab-stars-background::after {
    animation-delay: 4s;
    box-shadow: 
        150px 250px rgba(255, 255, 255, 0.7),
        350px 100px rgba(255, 255, 255, 0.9),
        550px 350px rgba(255, 255, 255, 0.6),
        750px 200px rgba(255, 255, 255, 0.8),
        950px 280px rgba(255, 255, 255, 0.5),
        1250px 120px rgba(255, 255, 255, 0.7),
        1450px 380px rgba(255, 255, 255, 0.9),
        850px 420px rgba(255, 255, 255, 0.6),
        650px 480px rgba(255, 255, 255, 0.8),
        1150px 520px rgba(255, 255, 255, 0.5),
        250px 580px rgba(255, 255, 255, 0.7),
        450px 620px rgba(255, 255, 255, 0.9),
        1650px 180px rgba(255, 255, 255, 0.6),
        1850px 340px rgba(255, 255, 255, 0.8);
}

@keyframes starlab-twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

/* ============================================
   フォームカード
   ============================================ */

.starlab-form-wrapper,
.starlab-result-wrapper {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.starlab-form-card,
.starlab-result-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 60px rgba(138, 43, 226, 0.2);
}

.starlab-form-title {
    color: #a8d8ea;
    font-size: 32px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(168, 216, 234, 0.5);
}

.starlab-form-subtitle {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-bottom: 30px;
    font-size: 14px;
}

/* ============================================
   フォーム入力
   ============================================ */

.starlab-form-group {
    margin-bottom: 25px;
}

.starlab-input-wrapper {
    position: relative;
}

.starlab-input {
    width: 100%;
    padding: 16px 16px 16px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.starlab-input:disabled,
.starlab-input.starlab-input-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

.starlab-input:focus {
    outline: none;
    border-color: #a8d8ea;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 0 3px rgba(168, 216, 234, 0.2),
        0 0 20px rgba(168, 216, 234, 0.1);
}

.starlab-input:focus + .starlab-label,
.starlab-input:not(:placeholder-shown) + .starlab-label,
.starlab-input:valid + .starlab-label {
    transform: translateY(-28px) scale(0.85);
    color: #a8d8ea;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1a3e 50%);
    padding: 0 6px;
}

.starlab-label {
    position: absolute;
    left: 16px;
    top: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
    padding: 0 4px;
}

/* チェックボックス */
.starlab-checkbox-wrapper {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
}

.starlab-checkbox-wrapper input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.starlab-agreement {
    margin-top: 15px;
    padding: 10px;
    background: rgba(168, 216, 234, 0.1);
    border-radius: 8px;
}

/* エラーメッセージ */
.starlab-form-errors {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    color: #ff6b9d;
}

.starlab-form-errors p {
    margin: 5px 0;
}

/* ============================================
   送信ボタン
   ============================================ */

.starlab-submit-button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(102, 126, 234, 0.4),
        0 0 0 0 rgba(168, 216, 234, 0.7);
}

.starlab-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(102, 126, 234, 0.6),
        0 0 30px rgba(168, 216, 234, 0.5);
}

.starlab-submit-button:active {
    transform: translateY(0);
}

.starlab-button-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.starlab-loader-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: starlab-loader-bounce 1.4s infinite ease-in-out both;
}

.starlab-loader-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.starlab-loader-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes starlab-loader-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   結果画面
   ============================================ */

.starlab-result-title {
    color: #a8d8ea;
    font-size: 28px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(168, 216, 234, 0.5);
}

/* ホロスコープ画像・プレースホルダー */
.starlab-chart-image-wrapper,
.starlab-chart-placeholder {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 40px;
    animation: starlab-fade-in 1.5s ease-out;
}

.starlab-chart-image {
    width: 100%;
    height: auto;
    border-radius: 50%;
    box-shadow: 
        0 0 40px rgba(168, 216, 234, 0.3),
        0 0 80px rgba(138, 43, 226, 0.2);
    animation: starlab-glow-pulse 3s ease-in-out infinite;
}

.starlab-chart-placeholder {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.starlab-chart-circle {
    width: 80%;
    height: 80%;
    border: 3px solid rgba(168, 216, 234, 0.3);
    border-radius: 50%;
    position: relative;
    animation: starlab-glow-pulse 3s ease-in-out infinite;
}

/* 周囲を回る星 */
.starlab-orbiting-stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.starlab-orbiting-stars::before,
.starlab-orbiting-stars::after {
    content: '✨';
    position: absolute;
    font-size: 20px;
    animation: starlab-orbit 8s linear infinite;
}

.starlab-orbiting-stars::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.starlab-orbiting-stars::after {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 4s;
}

@keyframes starlab-orbit {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

@keyframes starlab-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes starlab-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(168, 216, 234, 0.3),
            0 0 40px rgba(138, 43, 226, 0.2);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(168, 216, 234, 0.5),
            0 0 80px rgba(138, 43, 226, 0.4);
    }
}

/* サマリーセクション */
.starlab-summary-section {
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(168, 216, 234, 0.1);
    border-left: 3px solid #a8d8ea;
    border-radius: 8px;
}

.starlab-summary-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-line;
}

/* セクション */
.starlab-section {
    margin-bottom: 30px;
}

.starlab-section-title {
    color: #a8d8ea;
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(168, 216, 234, 0.2);
}

.starlab-planets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.starlab-planet-item {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-align: center;
}

.starlab-planet-name {
    color: #a8d8ea;
    font-weight: 600;
    margin-bottom: 5px;
}

.starlab-planet-detail {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.starlab-planet-degree {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* 有料セクション */
.starlab-premium-section {
    margin-top: 40px;
    padding: 30px;
    background: rgba(138, 43, 226, 0.15);
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.starlab-premium-title {
    color: #dda0dd;
    font-size: 20px;
    margin-bottom: 20px;
}

.starlab-premium-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.starlab-premium-button {
    display: inline-block;
    padding: 14px 24px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.starlab-premium-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .starlab-form-card,
    .starlab-result-card {
        padding: 30px 20px;
    }

    .starlab-form-title {
        font-size: 24px;
    }

    .starlab-premium-buttons {
        flex-direction: column;
    }
}