:root { --pink: #ff00ff; --glow: 0 0 15px rgba(255, 0, 255, 0.7); }

body { 
    margin: 0; background: #000; height: 100vh; 
    display: flex; justify-content: center; align-items: center; 
    /* 一般的なゴシック体フォント */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #fff; 
}

.card { width: 320px; text-align: center; }

.title {
    font-size: 1.8rem; font-weight: bold; margin-bottom: 25px;
    color: #fff; text-shadow: 0 0 10px var(--pink);
}

.view { 
    width: 280px; height: 280px; background: #111; margin: 0 auto; 
    border-radius: 40px; position: relative; overflow: hidden; 
    box-shadow: var(--glow); border: 2px solid var(--pink);
}

video { width: 100%; height: 100%; object-fit: cover; }

#ld { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); display: none; flex-direction: column; 
    justify-content: center; align-items: center; color: var(--pink); z-index: 10; 
}

.an-text { font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; }
.bar-bg { width: 180px; height: 10px; background: #333; border-radius: 10px; overflow: hidden; }
#bar { width: 0%; height: 100%; background: var(--pink); transition: width 0.1s; }
#prog { font-size: 1rem; margin-top: 5px; }

.btn-box { height: 60px; margin-top: 30px; }

button { 
    width: 220px; padding: 16px; border-radius: 50px; border: none; 
    background: linear-gradient(135deg, var(--pink), #800080); 
    color: #fff; font-weight: bold; cursor: pointer; font-size: 1.1rem; 
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

#home-btn { 
    width: 160px; padding: 10px; margin-top: 30px; font-size: 0.9rem; 
    background: transparent; border: 1px solid var(--pink); color: #fff;
    font-weight: bold; cursor: pointer;
}

.res-label { font-size: 1.1rem; color: var(--pink); margin-top: 20px; font-weight: bold; }
#sc { font-size: 5.5rem; font-weight: bold; text-shadow: var(--glow); margin-top: 5px; }