/* 电脑端适配样式 - 居中显示，左右留白 */

/* 电脑端容器样式 */
body.is-desktop {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a1a 100%);
    min-height: 100vh;
    overflow: auto !important;
    padding: 40px 0 120px 0;
}

body.is-desktop #app-container {
    position: relative !important;
    width: 375px !important;
    min-width: 375px !important;
    max-width: 375px !important;
    height: 812px !important;
    min-height: 812px !important;
    max-height: 812px !important;
    top: auto !important;
    left: auto !important;
    border-radius: 24px 24px 20px 20px;
    box-shadow: 0 0 60px rgba(100, 100, 255, 0.15),
                0 0 120px rgba(50, 50, 150, 0.1);
    overflow: hidden;
    transform: scale(1.25);
    transform-origin: center top;
    margin: 0 auto;
    flex-shrink: 0;
}

/* 保持容器宽高固定，不受窗口影响 */
@media screen and (max-height: 1100px) {
    body.is-desktop #app-container {
        width: 375px !important;
        height: 812px !important;
        min-height: 812px !important;
        max-height: 812px !important;
        border-radius: 24px 24px 20px 20px;
    }
}

/* 电脑端页面样式 */
body.is-desktop .page {
    width: 100%;
    height: 100%;
}

/* 电脑端背景图适配 */
body.is-desktop .bg-img {
    object-fit: cover;
}

/* 电脑端音乐控制按钮位置调整 */
body.is-desktop .music-control {
    top: 20px;
    right: 20px;
}

/* 电脑端鼠标悬停效果 */
body.is-desktop .start-button:hover,
body.is-desktop .text-button:hover,
body.is-desktop .submit-button:hover,
body.is-desktop .result-enter:hover,
body.is-desktop .detail-button1:hover,
body.is-desktop .detail-button2:hover,
body.is-desktop .detail-button3:hover {
    transform: scale(1.05);
    cursor: pointer;
}

body.is-desktop .answer-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

/* 电脑端分享按钮悬停效果 */
body.is-desktop .share-btn:hover {
    transform: translateY(-3px);
    cursor: pointer;
}

body.is-desktop .share-btn:hover .share-btn-icon {
    transform: scale(1.1);
}

/* 电脑端分享弹框居中 */
body.is-desktop .share-modal {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
}

body.is-desktop .share-modal.show {
    transform: translateX(-50%) translateY(0);
}

/* 电脑端输入框样式优化 */
body.is-desktop .name-input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
}

/* 电脑端滚动条美化 */
body.is-desktop #page6::-webkit-scrollbar,
body.is-desktop #page7::-webkit-scrollbar {
    width: 6px;
}

body.is-desktop #page6::-webkit-scrollbar-track,
body.is-desktop #page7::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

body.is-desktop #page6::-webkit-scrollbar-thumb,
body.is-desktop #page7::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

body.is-desktop #page6::-webkit-scrollbar-thumb:hover,
body.is-desktop #page7::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 电脑端外部装饰 - 可选 */
body.is-desktop::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(100, 100, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(150, 100, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}


/* ========== 电脑端 Page 7 详情页适配 ========== */

/* 电脑端禁止滚动，单页面显示 */
body.is-desktop #page7 {
    overflow: hidden !important;
}

body.is-desktop #page7 .detail-content {
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    justify-content: flex-start;
    padding-top: 60px;
}

/* 底部按钮缩小防止堆叠 */
body.is-desktop #page7 .detail-buttons {
    width: 90%;
    gap: 6px;
}

body.is-desktop #page7 .detail-button1 {
    width: clamp(100px, 32vw, 130px);
}

body.is-desktop #page7 .detail-button2,
body.is-desktop #page7 .detail-button3 {
    width: clamp(45px, 15vw, 60px);
}

/* ========== 电脑端 Page 6 结果页适配 ========== */

/* 电脑端禁止滚动，单页面显示 */
body.is-desktop #page6 {
    overflow: hidden !important;
}

body.is-desktop #page6 .result-content {
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    justify-content: flex-start;
    padding-top: 80px;
}

/* 结果页背景图填充满不放大 */
body.is-desktop #page6 .bg-img {
    object-fit: cover;
    object-position: center center;
}

/* 所有结果页星球位置向右调整 */
body.is-desktop #page6 .result-planet {
    right: -5% !important;
}