html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden; /* 不想页面滚动就开着 */
}

/* Three.js 画布作为背景铺满 */
canvas.webgl {
    position: fixed;
    inset: 0;            /* top/right/bottom/left 全 0 */
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

.overlay {
    position: fixed;
    top: 50%;
    left: 72%;
    transform: translate(-50%, -50%);
    z-index: 10;

    color: white;

    text-align: center;
    pointer-events: none; /* 如果你还要用鼠标拖动 OrbitControls，建议加这个 */
}

.overlay h1 {
    font-size: 5rem;
    font-family: Poiret One;
    white-space: nowrap;
    word-spacing: -0.1em;
    margin: 0.3em 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.overlay p {
    font-family: DM Serif Display;
    font-size: 1.5rem;
    margin: 0.3em 0;
    word-spacing: 0.5em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

@media (min-aspect-ratio: 0.8) and (max-aspect-ratio: 1.25) {
    .overlay{
        left: 50%;              /* 从右侧改为居中 */
        top: 49%;               /* 你也可以改成 50% 或更靠上 */
        transform: translate(-50%, -50%);
        width: 90vw;            /* 防止文字太长溢出 */
        padding: 0 12px;
    }

    .overlay h1{
        font-size: 3.9rem;      /* 原来 5rem 在手机太大 */
        white-space: normal;    /* 允许换行 */
        word-spacing: 0;        /* 手机上通常不需要负间距 */
        line-height: 1.1;
    }

    .overlay p{
        font-size: 1.1rem;        /* 原来 1.5rem 在手机偏大 */
        word-spacing: 0.2em;
        line-height: 1.4;
    }
}

@media (max-aspect-ratio: 0.8) {
    .overlay{
        left: 50%;              /* 从右侧改为居中 */
        top: 49%;               /* 你也可以改成 50% 或更靠上 */
        transform: translate(-50%, -50%);
        width: 90vw;            /* 防止文字太长溢出 */
        padding: 0 12px;
    }

    .overlay h1{
        font-size: 3rem;      /* 原来 5rem 在手机太大 */
        white-space: normal;    /* 允许换行 */
        word-spacing: 0;        /* 手机上通常不需要负间距 */
        line-height: 1.1;
    }

    .overlay p{
        font-size: 1.1rem;        /* 原来 1.5rem 在手机偏大 */
        word-spacing: 0.2em;
        line-height: 1.4;
    }
}



@media (max-width: 390px) {
    .overlay h1{ font-size: 2.2rem; }
    .overlay p{ font-size: 0.95rem; }
}