@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body {
    margin: 0;
    font-family: 'DotGothic16', monospace;
    background-color: #04040a; 
    color: #fff;
    overflow: hidden; 
    height: 100vh;
    width: 100vw;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
}

body::after {
    content: "";
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: repeating-linear-gradient(
        0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

.music-btn {
    position: absolute; top: 20px; right: 25px;
    background: #000; color: #555; border: 3px solid #555;
    padding: 8px 12px; font-size: 18px; cursor: pointer; z-index: 101;
}
.music-btn.playing { color: #f5da55; border-color: #fff; }

.title-box {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    text-align: center; background: #000; border: 3px solid #fff;
    padding: 10px 25px; z-index: 100;
    width: fit-content; 
    max-width: 90%;
    box-shadow: 6px 6px 0px rgba(255, 255, 255, 0.2);
}
.title { color: #f5da55; margin: 0; font-size: 26px; letter-spacing: 0px; }
.subtitle { color: #aaa; font-size: 18px; margin: 5px 0 0 0; }

.sky-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.star-field, .svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.svg-layer { pointer-events: none; z-index: 1; }
.star-field { z-index: 10; }

/* 像素风飞船 */
.spaceship {
    position: absolute;
    width: 1em; height: 1em;
    font-size: 0.6vmin; 
    z-index: 100;
    left: 10%; top: 10%; 
    transform: translate(-50%, -50%) rotate(0deg); 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                left 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                top 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.spaceship::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-shadow: 
        0 -5em 0 #000,
        -1em -4em 0 #000, 0 -4em 0 #e63946, 1em -4em 0 #000,
        -2em -3em 0 #000, -1em -3em 0 #e63946, 0 -3em 0 #e63946, 1em -3em 0 #e63946, 2em -3em 0 #000,
        -2em -2em 0 #000, -1em -2em 0 #fff, 0 -2em 0 #ccc, 1em -2em 0 #ccc, 2em -2em 0 #000,
        -2em -1em 0 #000, -1em -1em 0 #fff, 0 -1em 0 #000, 1em -1em 0 #ccc, 2em -1em 0 #000,
        -3em 0 0 #000, -2em 0 0 #000, -1em 0 0 #fff, 0 0 0 #a8dadc, 1em 0 0 #000, 2em 0 0 #000, 3em 0 0 #000,
        -4em 1em 0 #000, -3em 1em 0 #e63946, -2em 1em 0 #000, -1em 1em 0 #fff, 0 1em 0 #000, 1em 1em 0 #ccc, 2em 1em 0 #000, 3em 1em 0 #e63946, 4em 1em 0 #000,
        -4em 2em 0 #000, -3em 2em 0 #e63946, -2em 2em 0 #000, -1em 2em 0 #fff, 0 2em 0 #ccc, 1em 2em 0 #ccc, 2em 2em 0 #000, 3em 2em 0 #e63946, 4em 2em 0 #000,
        -4em 3em 0 #000, -3em 3em 0 #000, -2em 3em 0 #000, -1em 3em 0 #000, 0 3em 0 #000, 1em 3em 0 #000, 2em 3em 0 #000, 3em 3em 0 #000, 4em 3em 0 #000,
        -1em 4em 0 #000, 0 4em 0 #555, 1em 4em 0 #000,
        -1em 5em 0 #000, 0 5em 0 #000, 1em 5em 0 #000;
}

.spaceship.flying::after {
    content: ''; position: absolute;
    top: 5.5em; left: 0; width: 1em; height: 1em;
    background: #fca311;
    box-shadow: 0 1em 0 #ffb703, 0 2em 0 #fb8500;
    transform-origin: top center;
    animation: thrust 0.15s infinite alternate;
}
@keyframes thrust {
    0% { transform: scaleY(0.6); opacity: 0.7; }
    100% { transform: scaleY(1.4); opacity: 1; filter: drop-shadow(0 5px 5px #ffb703); }
}

/* 完美像素星 */
.star-node {
    position: absolute; width: 1em; height: 1em; 
    transform: translate(-50%, -50%); color: #4a4e69; background-color: currentColor;
    box-shadow: 
        0 -5em 0, 0 -4em 0,
        -1em -3em 0, 0 -3em 0, 1em -3em 0,
        -2em -2em 0, -1em -2em 0, 0 -2em 0, 1em -2em 0, 2em -2em 0,
        -4em -1em 0, -3em -1em 0, -2em -1em 0, -1em -1em 0, 0 -1em 0, 1em -1em 0, 2em -1em 0, 3em -1em 0, 4em -1em 0,
        -2em 0 0, -1em 0 0, 1em 0 0, 2em 0 0,
        -1em 1em 0, 0 1em 0, 1em 1em 0,
        0 2em 0, 0 3em 0;
    cursor: pointer; 
}
.star-node::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 12em; height: 12em; background-color: transparent; 
}
.star-node:hover { color: #fff; transform: translate(-50%, -50%) scale(1.2); }
.star-node.opened { color: #f5da55; animation: retro-blink 2s steps(2, start) infinite; }
@keyframes retro-blink { 0% { opacity: 1; filter: drop-shadow(0 0 4px #f5da55); } 50% { opacity: 0.6; filter: drop-shadow(0 0 1px #f5da55); } 100% { opacity: 1; filter: drop-shadow(0 0 4px #f5da55); } }

/* ===================================================
   ！！！核心升级：弹窗宽度随正文自适应！！！
=================================================== */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal.hidden { display: none; } 

.modal-content { 
    background: #000; color: #fff; 
    
    width: fit-content; /* 魔法属性：完全贴合文字长度，绝不自动换行 */
    min-width: 380px;   /* 底线防守：防止文字太短时框显得太瘦弱 */
    max-width: 90vw;    /* 移动端防线：文字再长也不能撑爆手机屏幕 */
    
    padding: 40px;    
    border: 5px solid #fff; 
    box-shadow: 10px 10px 0px #f5da55; 
    position: relative; text-align: center; 
    max-height: 85vh; overflow-y: auto; 
}

.close-btn { position: absolute; top: 15px; right: 20px; font-size: 32px; cursor: pointer; color: #aaa; }
#modal-date { color: #e94560; margin: 0 0 20px 0; font-size: 32px; border-bottom: 3px dashed #555; padding-bottom: 15px;}

#modal-image { 
    max-width: 100%;       
    height: auto;          
    max-height: 45vh;      
    object-fit: contain;   
    border: 3px solid #555; 
    margin: 0 auto 20px auto; 
    display: block; 
}

/* white-space: pre-wrap 保证你代码里写的 \n 会忠实换行 */
#modal-text { line-height: 1.8; color: #ddd; font-size: 24px; margin-bottom: 30px; white-space: pre-wrap; }

.modal-voucher { 
    background: #111; 
    color: #00bfff; 
    border: 3px dashed #00bfff; 
    padding: 20px; 
    font-size: 24px; 
    display: flex; justify-content: center; align-items: center; 
}

.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: #111; }
.modal-content::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }