:root {
    --main-purple: #582A72;
    --accent-neon: #8A2BE2; /* BlueViolet: より鮮やかな紫に */
    --glow-color: rgba(138, 43, 226, 0.7); /* グローエフェクト用の色 */
    --black: #0d0d0d; /* 完全な黒より少し柔らかく */
    --white: #f0f0f0; /* 完全な白より少し柔らかく */
    --font-jp: 'Noto Serif JP', serif;
    --font-en: 'Orbitron', sans-serif;
    --header-height: 70px;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-neon) var(--black);
    height:100%;
    overflow:hidden; /* html itself not scrollable */
    overflow-x:hidden;
}
body {
    font-family: var(--font-jp);
    color: var(--white);
    background: var(--black);
    line-height: 1.8;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto; /* sole scrollbar */
    /* perspective: 1000px; */ /* for 3D section animation */
}
/* コンテンツフェードイン用（必要なら後で調整） */
body.loaded .fade-in-on-load {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* === Equalizer Waveform Canvases === */
#eq-left, #eq-right {
    position: fixed;
    top: 0;
    bottom: 0; /* stretch */
    width: 250px;
    pointer-events: none;
    z-index: -1 !important; /* behind main content but before body background */
}
#eq-left { left: 0; }
#eq-right { right: 0; transform: scaleX(-1); }

.container {
    width: 90%;
    max-width: 1100px; /* 少し狭めてコンテンツのまとまりを良くする */
    margin: auto;
}

/* ===== Loader Styles ===== */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--black);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.4s ease;
}
#loader.hidden { opacity: 0; pointer-events:none; }

/* === loading area === */
.loading-area{
    position: absolute;
    bottom: 35vh;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    max-width: 125px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    /* ローディングバーの位置を画面下から20%の位置に下げる */
    bottom: 20vh;
}
.loading-bar{
    width: 100%;
    height: 8px;
    background: rgba(138,43,226,0.25);
    overflow: hidden;
    border: 1px solid var(--accent-neon);
    box-shadow: 0 0 8px var(--accent-neon);
}
.loading-fill{
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#00eaff 0%,#8A2BE2 100%);
    box-shadow: 0 0 6px #00eaff;
    transition: width 0.05s ease-out;
}
.loading-text{
    display: block;
    margin-top: 8px;
    color: var(--accent-neon);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* --- System Boot-up Loader --- */
.bootup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* smaller overall */
    padding: 1.5rem 3rem;
    display: inline-block;
    color: var(--accent-neon);
    font-family: var(--font-en);
    text-shadow: 0 0 6px var(--glow-color), 0 0 12px var(--accent-neon);
}

.boot-text {
    font-size: clamp(2rem, 5vw, 3.5rem); /* smaller */
    letter-spacing: 6px;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    clip-path: inset(100% 0 0 0);
    animation: boot-reveal 2.2s cubic-bezier(0.77,0,0.18,1) 0.2s forwards;
    text-shadow:
        0 0 6px var(--glow-color),
        0 0 12px var(--accent-neon),
        2px 2px 4px rgba(0,0,0,0.6); /* drop shadow */
}

@keyframes boot-reveal {
    0%   { clip-path: inset(100% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.border-line {
    position: absolute;
    background: var(--accent-neon);
    box-shadow: 0 0 6px var(--glow-color), 0 0 12px var(--accent-neon);
}

.line-top, .line-bottom { height: 4px; width: 0; }
.line-left, .line-right { width: 4px; height: 0; }

.line-top { top: 0; left: 0; animation: draw-width 0.35s linear 0.3s forwards; }
.line-right { top: 0; right: 0; animation: draw-height 0.35s linear 0.65s forwards; }
/* bottom now draws left -> right like top */
.line-bottom { bottom: 0; right: 0; animation: draw-width 0.35s linear 1s forwards; }
/* left now draws top -> bottom like right */
.line-left { bottom: 0; left: 0; animation: draw-height 0.35s linear 1.35s forwards; }

@keyframes draw-width {
    to { width: 100%; }
}

@keyframes draw-height {
    to { height: 100%; }
}

 /* ===== Loader legacy glitch styles are kept hidden (unused) ===== */
 .glitch { display:none !important; }

.glitch {/* legacy styles retained but hidden */
    position: relative;
    font-family: var(--font-en);
    font-size: 2.5rem;
    color: var(--accent-neon);
    text-transform: uppercase;
    animation: glitch-load 2s steps(20) 0s 1 normal both;
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* background: var(--black); を削除 */
    overflow: hidden;
}
.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--accent-neon);
    clip-path: inset(0 0 45% 0);
    animation: glitch-anim 2s infinite ease-in-out alternate-reverse;
}
.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #ff00c8;
    clip-path: inset(50% 0 0 0);
    animation: glitch-anim-2 2s infinite ease-in-out alternate-reverse;
}
@keyframes glitch-load {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes glitch-anim {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}
@keyframes glitch-anim-2 {
    0% { transform: translate(0); }
    20% { transform: translate(2px, -2px); }
    40% { transform: translate(2px, 2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(-2px, 2px); }
    100% { transform: translate(0); }
}

/* Header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(13, 13, 13, 0.7); /* 背景色をbodyに合わせる */
    backdrop-filter: blur(10px);
    z-index: 1000;
    height: var(--header-height);
    transition: background 0.3s;
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.logo {
    font-family: var(--font-en);
    font-size: 1.5rem;
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    /* ===== ロゴにもグロー効果 ===== */
    text-shadow: 0 0 8px var(--glow-color);
    animation: pulse-glow 3s ease-in-out infinite;
}
.logo .ja {
    font-family: var(--font-jp);
    color: var(--accent-neon);
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem; /* 間隔を広げる */
}
.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-en);
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: var(--accent-neon);
    transition: width 0.3s ease;
}
.nav-links a:hover {
    color: var(--accent-neon);
    text-shadow: 0 0 10px var(--glow-color);
}
.nav-links a:hover::after {
    width: 100%;
}

/* Hamburger Menu */
.hamburger {
    display: none; /* デフォルトは非表示 */
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}

/* Hero */
.hero-section {
    position: relative;
    height: 100vh;
    /* ===== 背景画像はプレースホルダーに変更, Canvasを使うので固定しない ===== */
    background: url('../images/hero_shion.jpg') center/cover no-repeat;
    background-position: 25% center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Canvasがはみ出ないように */
    margin-bottom:-1px; /* slight overlap to hide sub-pixel gap during scroll */
    will-change:transform;
}
.hero-section::after{ display:none; }
/* Ken Burns effect */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    transform-origin: center;
    animation: ken-burns 25s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes ken-burns {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
/* ===== パーティクル用のCanvasのスタイル ===== */
#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-section .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 13, 13, 1) 0%, rgba(13, 13, 13, 0.5) 50%, rgba(13, 13, 13, 1) 100%);
    z-index: 2;
    backface-visibility:hidden;
    will-change: transform, opacity;
}
.hero-content, #hero-content-wrapper { 
    position: relative; 
    z-index: 3; 
}
#hero-content-wrapper {
    transition: transform 0.2s ease-out;
}
.hero-content {
    position: relative;
    z-index: 3;
}

.catchphrase {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(0,0,0,0.7);
}

.hero-line{
    white-space: nowrap;
}

/* Buttons */
.btn {
    display: inline-flex; /* ← inline-block から変更 */
    align-items: center; /* ← これを追加（垂直中央揃え） */
    justify-content: center; /* ← これを追加（水平中央揃え） */
    padding: 0.9rem 2rem;
    border: 2px solid var(--accent-neon);
    border-radius: 50px;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}
.btn.ghost {
    background: transparent;
    color: var(--white);
    margin: 0 0.5rem;
    /* ===== グロー効果を追加 ===== */
    box-shadow: 0 0 10px -5px var(--glow-color), inset 0 0 10px -5px var(--glow-color);
}
.btn.ghost:hover {
    background: var(--accent-neon);
    color: var(--white);
    box-shadow: 0 0 25px -5px var(--glow-color), inset 0 0 10px -5px var(--glow-color);
}
.btn.ghost.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}
.btn.accent {
    background: var(--accent-neon);
    color: var(--white);
    box-shadow: 0 0 20px -5px var(--glow-color);
}
.btn.accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px -5px var(--glow-color);
}

/* Sections */
.section {
    padding: 120px 0;
    position: relative;
    scroll-margin-top:80px; /* header height */
}
.section:not(.hero-section)::before{
    content:'';
    position:absolute;
    top:-2px;
    left:0;
    width:100%;
    height:2px;
    background:#0d0d0d;
    z-index:4;
    pointer-events:none;
}
.section-title {
    font-family: var(--font-en);
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: 4rem;
    color: var(--white);
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
    /* ===== グロー効果を追加 ===== */
    text-shadow: 0 0 15px var(--glow-color);
    animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%,100% { text-shadow: 0 0 6px var(--glow-color); }
    50% { text-shadow: 0 0 14px var(--glow-color); }
}

/* ABOUT */
.about-content {
    background: rgba(255,255,255,0.05); /* 背景を少し明るく */
    padding: 2.5rem;
    border-left: 4px solid var(--accent-neon);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    gap: 2rem;
    align-items: flex-start;
 }
.about-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent-neon);
    font-family: var(--font-en);
}
.about-icon {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--accent-neon);
    box-shadow: 0 0 12px var(--glow-color);
    margin-bottom: 1rem;
}
.about-text {
    flex: 1;
}

/* MUSIC */
.streaming-links{
    margin-top: 1.5rem;
    display: flex;
    gap: 3.5rem; /* doubled space */
    transition: opacity 0.3s ease;
}
.streaming-links img.stream-logo{
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.streaming-links a:hover img.stream-logo{
    transform: scale(1.1) translateY(-3px);
}
.streaming-links a:hover i {
    transform: scale(1.1) translateY(-3px);
    color: var(--accent-neon);
}
.music-flex {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    flex-wrap: wrap;
    align-items: center; /* flex-start から center に変更 */
}
.music-cover {
    flex: 1;
    min-width: 280px;
    position: relative;
    overflow: hidden;
    max-width: 420px;
    aspect-ratio: 1 / 1; /* この行を追記 (横:縦の比率を1:1に) */
}
.music-cover img{
    width: 100%;
    height: 100%; /* auto から 100% に変更 */
    display: block;
    object-fit: cover; /* この行を追記 */
}
.music-cover video.cover-preview{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    pointer-events:none; /* avoid triggering hover flicker */
    opacity:0;
    transition: opacity .2s ease;
    border-radius: inherit;
}
.music-info {
    flex: 1.5;
}
.music-player-container {
    margin-top: 1.5rem;
}
.music-player-container audio {
    /* 幅を100%から少し狭めて、はみ出しを防ぐ */
    width: 80%;
}

/* LYRICS */
.lyrics-section {
    background: var(--black) url('https://www.transparenttextures.com/patterns/washi.png') repeat;
    background-blend-mode: overlay;
    color: var(--white);
    padding: 120px 0;
}
.song-title {
    text-align: center;
    color: var(--accent-neon);
    margin-bottom: 2rem;
    font-size: 2rem;
    font-family: var(--font-en);
    text-shadow: 0 0 10px var(--glow-color);
}
.lyrics-text {
    white-space: pre-wrap;
    background: rgba(13, 13, 13, 0.8);
    backdrop-filter: blur(5px);
    padding: 2.5rem;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 10px;
    max-height: 70vh;
    overflow-y: auto;
    text-align: center;
    font-size: 1.1rem;
    line-height: 2.2;
}

/* ===== FANART Section Styles ===== */
.fanart-content {
    background: rgba(255,255,255,0.05);
    padding: 2.5rem;
    border-left: 4px solid var(--accent-neon);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--white);
    line-height: 1.9;
}

.fanart-subtitle {
    font-family: var(--font-en);
    font-size: 1.6rem;
    color: var(--accent-neon);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(138, 43, 226, 0.5);
}

.fanart-content p,
.fanart-content li,
.fanart-content dd {
    margin-bottom: 1.2rem;
}

.guideline-list, .qa-list {
    padding-left: 20px;
}

.guideline-list li {
    margin-bottom: 1.8rem;
}

.qa-list dt {
    font-weight: bold;
    color: var(--accent-neon);
    margin-bottom: 0.5rem;
}

.qa-list dd {
    padding-left: 1.5em;
    border-left: 2px solid rgba(138, 43, 226, 0.3);
}

.note {
    font-size: 0.9rem;
    opacity: 0.8;
    text-align: right;
}

code.hashtag {
    background: var(--accent-neon);
    color: var(--white);
    padding: 0.2em 0.6em;
    border-radius: 5px;
    font-family: var(--font-jp);
    font-weight: bold;
    text-shadow: none;
}

.fanart-content .external-link {
    color: var(--accent-neon);
    text-decoration: none;
    font-weight: bold;
    position: relative;
}

.fanart-content .external-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-neon);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}

.fanart-content .external-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Footer */
.footer {
    position: relative;
    z-index: 5;
    background: #000; /* Darker background for distinction */
    text-align: center;
    padding: 4rem 0 2rem 0; /* More padding on top */
    border-top: 1px solid rgba(138, 43, 226, 0.3); /* Add a separator line */
}

.footer-title {
    font-family: var(--font-en);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 2rem;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 15px var(--glow-color);
    animation: pulse-glow 3s ease-in-out infinite;
}

.footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    margin-bottom: 3rem; /* Space between icons and copyright */
}
.footer .social-icons img.social-logo{
    width:50px; /* slightly smaller for footer */
    height:50px;
    object-fit:contain;
    display:block;
    transition:transform 0.3s ease;
}
.footer .social-icons a:hover img.social-logo{
    transform:scale(1.05) translateY(-3px);
}

.footer .copyright {
    font-family: var(--font-en);
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

/* ===== スクロールアニメーション用のクラス ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-up { /* Hero用 */
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 2.8s;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Panel scroll 3D animation === */
.panel {
    transform: rotateY(40deg) translateX(25vw) scale(0.8);
    opacity: 0;
    transform-origin: center right;
    transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.6s ease;
}
.panel.is-visible {
    transform: none;
    opacity: 1;
    transform-origin: center center;
}
.panel.past {
    transform: rotateY(-40deg) translateX(-25vw) scale(0.8);
    opacity: 0;
    transform-origin: center left;
}

/* ==== dynamic music list ==== */
.music-list {
    /* display: grid; などを削除 */
    /* Swiper側でスタイルが適用されるため、ここは空でもOK */
}
.music-item.coming-soon .music-cover::after{
    content:"COMING SOON";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-family:var(--font-en);
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing:2px;
}

#about{
    position:relative;
    z-index:1;
    will-change:transform;
}

/* custom scrollbar webkit */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--black);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-neon);
    border-radius: 4px;
}

/* ===== Scroll Down Arrow Styles ===== */
.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-left: 3px solid var(--white);
    border-bottom: 3px solid var(--white);
    transform: rotate(-45deg);
    z-index: 5;
    opacity: 0;
    box-shadow: 0 0 10px var(--glow-color);
    animation: bounce 2.5s infinite, fadeInScrollArrow 1s ease 3.5s forwards; /* bounceアニメーションとfadeInアニメーションを適用 */
}

.scroll-down:hover {
    opacity: 1;
}

/* スクロールアローが上下に動くアニメーション */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-45deg);
    }
    40% {
        transform: translateX(-50%) translateY(-20px) rotate(-45deg);
    }
    60% {
        transform: translateX(-50%) translateY(-10px) rotate(-45deg);
    }
}

/* ローディング後にアローをフェードインさせるアニメーション */
@keyframes fadeInScrollArrow {
    to {
        opacity: 0.7;
    }
}

.links-section{
    padding-bottom: 60px; /* reduce bottom gap so footer sits nearer */
}

/* Hero bottom mask to hide subpixel flicker */
.hero-section::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:100%;height:8px;
    background:#0d0d0d;
    pointer-events:none;
    z-index:5;
}

/* ===== Game Section ===== */
.game-container{
    max-width:950px;
    margin:0 auto;
    text-align:center;
    position:relative;
}
.game-description{
    margin-bottom:1.5rem;
    color:var(--white);
    line-height:1.8;
}
#game-canvas-wrapper{
    position:relative;
    width:100%;
    max-width: 950px; /* ← 800pxから900pxに変更 */
    margin:0 auto;
    aspect-ratio:16/9;
}
#shion-game{
    width:100%;
    height:100%;
    background:rgba(13,13,13,0.85);
    border:2px solid var(--accent-neon);
    box-shadow:0 0 16px var(--glow-color);
    display:block;
}
/* 判定ライン */
#shion-game::after{
    content:'';
    position:absolute; /* note: achieved via wrapper pseudo? Use separate element later */
}
#game-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.5);
    z-index:3;
    pointer-events:auto; /* interactive by default */
}
/* During gameplay, disable overlay interactions so canvas receives input */
body.game-playing #game-overlay{
    pointer-events:none;
}
#game-title-screen,
#game-select-screen,
#game-result,
#game-pause-screen {
    pointer-events:auto;
}
#game-ui{
    margin-top:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
    color:var(--white);
    font-family:var(--font-en);
    font-size:1.1rem;
}
#game-progress-bar-container{
    flex:1;
    height:8px;
    background:rgba(255,255,255,0.2);
    border-radius:4px;
    overflow:hidden;
    position:relative;
}
#game-progress-bar{
    position:absolute;
    left:0;top:0;bottom:0;
    width:0%;
    background:linear-gradient(90deg,#8A2BE2,#BA55D3);
    box-shadow:0 0 6px var(--accent-neon);
}
/* Key display under canvas */
#game-key-display{
    position:relative;
    display:flex;
    justify-content:space-between;
    max-width:800px;
    margin:0.5rem auto 0;
    pointer-events:none;
}
#game-key-display .key{
    flex:1;
    text-align:center;
    font-family:var(--font-en);
    font-size:1.1rem;
    color:var(--white);
    opacity:0.7;
    transition:transform 0.1s ease, opacity 0.1s;
}
#game-key-display .key.active{
    transform:scale(1.25);
    opacity:1;
    color:var(--accent-neon);
}
/* key display */
#game-key-display{
    position:absolute;
    left:0;
    top:100%; /* just below canvas */
    transform:translateY(8px);
    width:100%;
    pointer-events:none;
}
.key{
    width:48px;height:48px;
    line-height:48px;
    border:2px solid var(--accent-neon);
    border-radius:6px;
    color:var(--white);
    font-family:var(--font-en);
    font-size:1.1rem;
    position:absolute; /* positioned by JS to lane centers */
    transform:translateX(-50%);
    transition:background 0.1s, box-shadow 0.1s;
}
.key.active{
    background:var(--accent-neon);
    color:#000;
    box-shadow:0 0 10px var(--accent-neon);
}
/* quit btn */
#game-quit-btn.small{
    margin-top:1rem;
    padding:6px 16px;
    font-size:0.9rem;
}
/* judgement text animation */
@keyframes judgement-pop{
    0%{transform:scale(0.3);opacity:0;}
    20%{opacity:1;}
    100%{transform:scale(1.5);opacity:0;}
}
.judgement-text{
    position:absolute;
    left: 50%;
    top: 45%;
    transform:translate(-50%,-50%);
    font-family:var(--font-en);
    font-size:3rem;
    font-weight:bold;
    pointer-events:none;
    animation:judgement-pop 0.7s forwards ease-out;
    text-shadow:0 0 10px currentColor;
    z-index:4;
}
.judgement-perfect{color:#E0FFFF;background:linear-gradient(45deg,#ff69b4,#00ffff,#8A2BE2);-webkit-background-clip:text;background-clip:text;color:transparent;}
.judgement-great{color:#FFD700;}
.judgement-good{color:#FFFFFF;}
.judgement-bad{color:#1E90FF;}
.judgement-miss{color:#FF4040;}
/* hit effect */
.hit-effect{
    position:absolute;
    width:100px;height:6px;
    background: #e2412cd7;
    filter:blur(2px);
    opacity:0.8;
    transform:translateX(-50%);
    animation:hit-flash 0.3s forwards ease-out;
    pointer-events:none;
    z-index:3;
}
@keyframes hit-flash{from{opacity:1;width:20px;}to{opacity:0;width:120px;}}
.hidden{display:none !important;}

#game-feedback-container{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:4;
}

/* === Rhythm Game additional styles === */
.difficulty-buttons{display:flex;gap:1rem;margin-top:1rem;justify-content:center;}
.difficulty-buttons .difficulty-btn{min-width:100px;}
/* Hold note visuals are canvas-drawn; style hint left here for reference */

/* Pause screen */
#game-pause-screen{
    position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.8);
    border:2px solid var(--accent-neon);
    padding:2rem 3rem;
    text-align:center;
    z-index:5;
    box-shadow:0 0 16px var(--glow-color);
}
#game-pause-screen h3{
    font-family:var(--font-en);
    color:var(--accent-neon);
    margin-bottom:1rem;
}

/* Fade out particle/eq during gameplay */
body.game-playing #particle-canvas,
body.game-playing #eq-left,
body.game-playing #eq-right{
    opacity:0;
    transition:opacity 1s ease;
}

/* Song select list */
#song-list-container{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    padding:0.5rem 0;
    margin-bottom:1rem;
}
.song-item{
    flex:0 0 120px;
    width:120px;height:120px;
    border:2px solid transparent;
    border-radius:8px;
    cursor:pointer;
    transition:border 0.2s, box-shadow 0.2s;
}
.song-item.selected{
    border-color:var(--accent-neon);
    box-shadow:0 0 12px var(--glow-color);
}
/* Countdown animation */
#game-countdown{
    position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    font-family:var(--font-en);
    font-size:4rem;
    color:var(--accent-neon);
    text-shadow:0 0 10px var(--glow-color);
    pointer-events:none;
    /* animation:count-pop 0.8s forwards ease-out;  removed – handled via GSAP in JS */
}
#game-loading-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    border: 2px solid var(--accent-neon);
    padding: 2rem 3rem;
    text-align: center;
    z-index: 5;
    box-shadow: 0 0 16px var(--glow-color);
}
#game-loading-screen h3 {
    font-family: var(--font-en);
    color: var(--accent-neon);
    margin-bottom: 0;
}

/* ゲームタイトル用のスタイリッシュなスタイル */
.game-title {
    font-family: var(--font-en), var(--font-jp); /* 英語フォントを優先しつつ、日本語も対応 */
    font-size: clamp(2rem, 6vw, 3.5rem); /* 画面サイズに応じてサイズを調整 */
    font-weight: 700;
    color: var(--accent-neon); /* グラデーション非対応ブラウザ用の色 */
    
    /* テキストをグラデーションにする */
    background: linear-gradient(45deg, #da70d6, #8a2be2, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* ネオン風のグロー（光彩）エフェクト */
    text-shadow: 
        0 0 5px rgba(218, 112, 214, 0.7),
        0 0 10px rgba(218, 112, 214, 0.7),
        0 0 20px rgba(138, 43, 226, 0.7),
        0 0 40px rgba(138, 43, 226, 0.5),
        0 0 80px rgba(0, 255, 255, 0.5);

    /* チカチカと点滅するアニメーションを適用 */
    animation: flicker-animation 4s infinite alternate;
    margin-bottom: 1.5rem; /* タイトルと説明文の間の余白 */
}

/* 点滅アニメーションの定義 */
@keyframes flicker-animation {
    /* アニメーションの各時点で、影の表示/非表示を切り替える */
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 5px rgba(218, 112, 214, 0.582),
            0 0 10px rgba(218, 112, 214, 0.527),
            0 0 20px rgba(138, 43, 226, 0.7),
            0 0 40px rgba(138, 43, 226, 0.5),
            0 0 80px rgba(0, 255, 255, 0.5);
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

/* ゲーム操作説明エリアのスタイル */
.game-instructions {
    background: rgba(13, 13, 13, 0.6); /* 半透明の背景 */
    border: 1px solid rgba(138, 43, 226, 0.5); /* ネオンカラーの枠線 */
    border-radius: 10px; /* 角を丸くする */
    padding: 1.2rem 1.8rem;
    margin: 2rem auto; /* 上下の余白 */
    max-width: 550px; /* 最大幅を指定 */
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.2);
    backdrop-filter: blur(5px); /* 背景のぼかし効果 */
    line-height: 1.8;
}

.game-instructions p {
    font-size: 0.95rem;
    color: #e0e0e0; /* テキストの色を少し明るく */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

/* 説明文の中のキー表示（<code>タグ）のスタイル */
.game-instructions code {
    display: inline-block;
    background: var(--accent-neon);
    color: var(--white);
    font-family: var(--font-en);
    padding: 0.2em 0.6em;
    margin: 0 0.2em;
    border-radius: 5px;
    border-bottom: 2px solid #6c1aae; /* 少し濃い紫で立体感を出す */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: none; /* 親のtext-shadowをリセット */
    transform: translateY(-2px); /* 少しだけ上に浮かせる */
}

/* =================================
   リザルト画面のスタイル
   ================================= */
   #game-result {
    display: flex; /* Flexboxレイアウトに変更 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(13, 13, 13, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent-neon);
    box-shadow: 0 0 25px var(--glow-color);
    border-radius: 15px;
    padding: 2rem 3rem; /* ← 上下と左右の余白を広げます */
    width: 90%;
    max-width: 580px; /* ← コンテナの最大幅を広げます */
    color: var(--white);
    font-family: var(--font-en);
}

#result-rank-container {
    margin-bottom: 1.5rem;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#result-rank {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1;
    /*text-shadow: 0 0 15px, 0 0 30px;*/
}

@keyframes rainbow-glow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ランクごとの色分け */
.rank-ss {
    /* 虹色のグラデーション背景を定義 */
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff);
    
    /* 背景サイズをテキストよりずっと大きく設定 */
    background-size: 400% 400%;

    /* テキストの形で背景を切り抜く（クリッピング） */
    -webkit-background-clip: text;
    background-clip: text;

    /* テキスト自体の色を透明にする */
    -webkit-text-fill-color: transparent;
    
    /* 上で定義したアニメーションを適用 */
    animation: rainbow-glow 4s ease-in-out infinite;

    /* 文字の周りを白く光らせて、より豪華に見せる */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.616);
}
.rank-s { color: #ffd700; text-shadow: 0 0 15px #ff8c00, 0 0 30px #ff8c00; }
.rank-a { color: #ff4500; text-shadow: 0 0 15px #ff4500, 0 0 30px #ff4500; }
.rank-b { color: #8a2be2; text-shadow: 0 0 15px #8a2be2, 0 0 30px #8a2be2; }
.rank-c { color: #1e90ff; text-shadow: 0 0 15px #1e90ff, 0 0 30px #1e90ff; }
.rank-d { color: #00ced1; text-shadow: 0 0 15px #00ced1, 0 0 30px #00ced1; }
.rank-e { color: #778899; text-shadow: 0 0 15px #778899, 0 0 30px #778899; }
.rank-f { color: #696969; text-shadow: 0 0 15px #696969, 0 0 30px #696969; }

#result-main {
    width: 100%;
    border-top: 1px solid rgba(138, 43, 226, 0.4);
    border-bottom: 1px solid rgba(138, 43, 226, 0.4);
    padding: 1rem 0;
    margin-bottom: 1rem;
}

#result-summary {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: #ddd;
}
.summary-item span {
    font-size: 1.5rem;
    color: var(--white);
}


#result-details {
    width: 100%;
    padding: 0 1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.2rem 0;
    font-size: 1.1rem;
}

.detail-label {
    font-weight: bold;
}

/* 判定ごとの色分け */
.detail-label.perfect {
    /* グラデーション背景を定義（ゲーム中の判定と同じもの） */
    background: linear-gradient(45deg, #ff69b4, #00ffff, #8A2BE2);
    
    /* テキストの形で背景を切り抜く */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* テキストの色を透明にして、背景のグラデーションを見せる */
    color: transparent;
    
    /* 既存の単色の影はグラデーションと合わないため、コメントアウトまたは削除 */
    /* text-shadow: 0 0 5px #E0FFFF; */
}
.detail-label.great   { color: #FFD700; text-shadow: 0 0 5px #FFD700; }
.detail-label.good    { color: #FFFFFF; }
.detail-label.bad     { color: #1E90FF; text-shadow: 0 0 5px #1E90FF; }
.detail-label.miss    { color: #FF4040; text-shadow: 0 0 5px #FF4040; }

.detail-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
}

.result-buttons {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
}

/* ★ここから新しいスタイルを追加★ */
.pause-settings {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.volume-control label {
    font-family: var(--font-en);
    font-size: 1.1rem;
    color: var(--white);
    flex-basis: 50px; /* ラベルの幅を固定 */
    text-align: left;
}

/* input[type=range] のスタイル */
input[type=range] {
    appearance: none;
    flex-grow: 1;
    background: transparent;
    cursor: pointer;
}

/* Webkit (Chrome, Safari) */
input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

input[type=range]::-webkit-slider-thumb {
    margin-top: -7px; /* thumbをトラックの中央に配置 */
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    border: 2px solid var(--accent-neon);
    box-shadow: 0 0 8px var(--glow-color);
    transition: transform 0.2s ease;
}

input[type=range]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* Mozilla (Firefox) */
input[type=range]::-moz-range-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 50%;
    border: 2px solid var(--accent-neon);
    box-shadow: 0 0 8px var(--glow-color);
    transition: transform 0.2s ease;
}

input[type=range]:hover::-moz-range-thumb {
    transform: scale(1.1);
}
/* ★ここまで新しいスタイルを追加★ */

.pause-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
/* 曲選択画面のタイトルスタイル */
#game-select-screen h3 {
    font-family: var(--font-en);
    color: var(--accent-neon);
    margin-bottom: 1rem; /* タイトルと曲リストの間に余白を作る */
    font-size: 1.8rem;
    text-transform: uppercase; /* 文字を大文字にする */
    text-shadow: 0 0 8px var(--glow-color);
}

/* 体力低下時のエフェクト用アニメーション */
@keyframes health-pulse-red {
    0% { box-shadow: inset 0 0 80px 20px rgba(255, 0, 0, 0); }
    50% { box-shadow: inset 0 0 100px 40px rgba(255, 0, 0, 0.6); }
    100% { box-shadow: inset 0 0 80px 20px rgba(255, 0, 0, 0); }
}

/* 体力が低下した時にbodyに適用されるエフェクト */
body.health-warning::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 999;
    animation: health-pulse-red 1.2s ease-in-out infinite;
}

/* 黄色い警告エフェクト用のアニメーション */
@keyframes health-pulse-yellow {
    0% { box-shadow: inset 0 0 70px 15px rgba(255, 215, 0, 0); }
    50% { box-shadow: inset 0 0 90px 35px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: inset 0 0 70px 15px rgba(255, 215, 0, 0); }
}

/* 体力注意（50%未満）の時に適用されるエフェクト */
body.health-caution::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 999;
    animation: health-pulse-yellow 1.8s ease-in-out infinite; /* 赤色より少しゆっくりしたアニメーション */
}

/* ゲーム中のUI（体力バーなど）をまとめるコンテナ */
#game-ui-container {
    position: absolute;
    top: 15px;
    left: 10px;
    width: 200px; /* UI全体の幅 */
    z-index: 4; /* 判定エフェクトより手前に表示 */
    pointer-events: none; /* UIがクリックを邪魔しないように */
    opacity: 0;
    transition: opacity 0.5s;
}
/* ゲームプレイ中だけ表示する */
body.game-playing #game-ui-container {
    opacity: 1;
}

/* 体力バーの背景と枠線 */
#health-bar-container {
    position: relative;     /* ← ここに position: relative を設定 */
    overflow: hidden;       /* ← この行を追加するとより確実です */
    width: 50%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--accent-neon);
    border-radius: 6px;
    margin-top: 50px; /* スコア表示とかぶらないように下にずらす */
    padding: 2px; /* 内側に少し余白を作る */
}

/* 体力バーの中身（実際に増減する部分） */
#health-bar-fill {
    width: 100%; /* 初期値は100% */
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease; /* 体力増減を滑らかに見せる */
}

/* 体力に応じた色の定義 */
.health-high { background-color: #00ff8c; } /* 60%以上 */
.health-medium { background-color: #ffd700; } /* 20%～60% */
.health-low { background-color: #ff4040; } /* 20%未満 */

/* === コンボ数に応じたキャンバス枠の装飾 === */

/* 50コンボ以上（Tier 2）用の脈動アニメーション */
@keyframes border-pulse-tier2 {
    0% {
        box-shadow: 0 0 16px #ffd700; /* 黄色いグロー */
    }
    50% {
        box-shadow: 0 0 30px 8px #ffd700; /* グローを強く */
    }
    100% {
        box-shadow: 0 0 16px #ffd700;
    }
}

/* 100コンボ以上（Tier 3）用の脈動アニメーション */
@keyframes border-pulse-tier3 {
    0% {
        box-shadow: 
            0 0 20px 5px rgba(255, 105, 180, 0.7),
            0 0 30px 10px rgba(0, 255, 255, 0.7);
    }
    50% {
        /* 色の順番と強さを変えて、揺らめいているように見せる */
        box-shadow: 
            0 0 30px 10px rgba(0, 255, 255, 0.8),
            0 0 45px 15px rgba(138, 43, 226, 0.7),
            0 0 60px 20px rgba(255, 105, 180, 0.6);
    }
    100% {
        box-shadow: 
            0 0 20px 5px rgba(255, 105, 180, 0.7),
            0 0 30px 10px rgba(0, 255, 255, 0.7);
    }
}


/* 50コンボ以上で適用されるスタイル */
body.combo-tier-2 #shion-game {
    border-color: #ffab40; /* 枠線の色を黄色に変更 */
    /* 上で定義したアニメーションを適用 */
    animation: border-pulse-tier2 2s ease-in-out infinite;
}

/* 100コンボ以上で適用されるスタイル */
body.combo-tier-3 #shion-game {
    /* 枠線をグラデーションにするテクニック */
    border: 4px solid transparent;
    border-image: linear-gradient(45deg, #ff69b4, #00ffff, #8A2BE2) 1;
    animation: border-pulse-tier3 2s ease-in-out infinite;
}

/* === 練習モード用スタイル === */

/* トグルボタン全体の位置決め */
.practice-mode-toggle {
    position: absolute;
    bottom: 1rem;       /* ★変更：画面下からの距離を詰める */
    right: 1.5rem;      /* ★変更：画面右からの距離を詰める */
    display: flex;
    align-items: center;
    gap: 0.6rem;        /* ★変更：ラベルとスイッチの間隔を詰める */
    background: rgba(0, 0, 0, 0.5);
    padding: 0.4rem 0.8rem; /* ★変更：内側の余白を小さくする */
    border-radius: 20px;
}

.practice-label {
    font-family: var(--font-en);
    font-size: 0.8rem; /* ★変更：フォントサイズを小さくする */
    color: var(--white);
}

/* トグルボタンの見た目（チェックボックス本体は隠す） */
.toggle-checkbox {
    display: none;
}
.toggle-label {
    position: relative;
    display: inline-block;
    width: 40px;  /* ★変更：幅を小さくする */
    height: 22px; /* ★変更：高さを小さくする */
    background-color: #555;
    border-radius: 11px; /* ★変更：角丸を調整 */
    cursor: pointer;
    transition: background-color 0.3s;
}
/* トグルボタンの丸い部分 */
.toggle-label::after {
    content: '';
    position: absolute;
    top: 3px;     /* ★変更：垂直位置を微調整 */
    left: 3px;    /* ★変更：水平位置を微調整 */
    width: 16px;  /* ★変更：幅を小さくする */
    height: 16px; /* ★変更：高さを小さくする */
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}
/* ONになった時のスタイル */
.toggle-checkbox:checked + .toggle-label {
    background-color: var(--accent-neon);
}
.toggle-checkbox:checked + .toggle-label::after {
    transform: translateX(18px); /* ★変更：移動距離を新しいサイズに合わせる */
}


/* === 体力バーのガードエフェクト === */

/* エフェクト用のアニメーション（斜めストライプが動く） */
@keyframes guard-effect-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* 練習モード有効時に体力バーに適用されるスタイル */
#health-bar-container.practice-mode-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* ← 単位を削除 */
    bottom: 0;
    border-radius: 6px;
    
    /* ↓↓ 記述を整理したストライプ背景 ↓↓ */
    background-image: linear-gradient(
        45deg,
        rgba(180, 100, 255, 0.8) 25%,
        transparent 35%,
        transparent 60%,
        rgba(180, 100, 255, 0.8) 50%,
        rgba(180, 100, 255, 0.8) 75%,
        transparent 75%
    );
    background-size: 50px 50px;
}

/* 曲選択画面を、ボタン配置の基準にする */
#game-select-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 右上に配置する戻るボタンのスタイル */
.back-button {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.8rem; /* アイコンの大きさ */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.back-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* 無効化されたナビゲーションリンクのスタイル */
.nav-links a.disabled {
    color: #888; /* 文字色をグレーに */
    opacity: 0.6; /* 全体を少し半透明に */
    pointer-events: none; /* クリックなどのマウスイベントを無効化 */
    cursor: not-allowed; /* マウスカーソルを「禁止」マークに */
}

/* 無効化されたリンクのホバー効果を上書き */
.nav-links a.disabled:hover::after {
    width: 0; /* ホバーしても下線が出ないようにする */
}
/* style.css の末尾などに追記 */
.squeeze-punctuation {
    margin-left: -0.5em; /* 数値を調整してお好みの間隔にしてください */
    display: inline-block;
}
/* style.css の末尾などに追記 */
.hero-subtitle {
    /* 1. 中央揃えにする */
    text-align: center;
    /* 2. テキストの折り返しを許可する (これが今回の重要な修正です) */
    white-space: nowrap;
    /* 3. 中央揃えや余白を正しく機能させるため */
    display: block;
    /* 以下はお好みで調整してください */
    font-size: 0.51em;  /* 文字サイズ */
    margin-top: 0.8em; /* 上の行との間隔 */
}
.music-description {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.7;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    white-space: pre-wrap; /* JSON内の改行(\n)を反映させるため */
}


/* --- Coverflowカルーセルのための新しいスタイル --- */

#music-swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

#music-swiper .swiper-slide {
    background-position: center;
    background-size: cover;
    /* スライド1枚あたりのサイズを固定します */
    width: 300px;
    height: auto; 
}

/* 中央のスライド以外の透明度を少し下げる（任意） */
#music-swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.4;
    transition: opacity 0.3s;
}
#music-swiper .swiper-slide .music-info {
    /* テキストなどを中央揃えにする */
    text-align: center;
    /* ジャケット画像との間に少し余白を作る */
    padding-top: 1.5rem;
    /* 左右の端に寄りすぎないように少し余白を設ける */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --- Swiper (Coverflow) のナビゲーションカラー調整 --- */

/* 左右の矢印の色をアクセントカラーに変更 */
#music-swiper .swiper-button-next,
#music-swiper .swiper-button-prev {
    color: var(--accent-neon);
}

/* アクティブなページネーションの点（ドット）の色をアクセントカラーに変更 */
#music-swiper .swiper-pagination-bullet-active {
    background-color: var(--accent-neon);
}
/* 2つ目以降のプロフィールにだけ、上の余白を追加する */
.about-content + .about-content {
    margin-top: 3rem;
}
/* style.css の末尾に追記 */

/* ABOUTセクションの注釈用スタイル */
.meta-note {
    /* 1. フォントを変更（サイトの英語部分で使われているフォント） */
    font-family: var(--font-jp);

    /* 2. 文字サイズを小さくする */
    font-size: 0.9rem;

    /* 3. 文字色を少し薄くして、本文との差を出す */
    color: #b0b0b0; 

    /* 4. 上の本文との間に少し余白を設ける */
    margin-top: 1.5rem;

    /* 5. 行間を少し詰める */
    line-height: 1.6;

    /* 6. テキストを右揃えにする（お好みで） */
    text-align: left;
}
/* ゲームタイトルのサブタイトル用スタイル */
.game-subtitle {
    display: block; /* メインタイトルの改行して下に表示させる */
    font-size: 0.5em; /* メインタイトルに対する相対的な文字サイズ */
    font-weight: normal; /* 文字の太さを通常に */
    letter-spacing: 2px; /* 文字間隔を少し広げて読みやすくする */
    margin-top: 0.5rem; /* 上のメインタイトルとの間に余白を設ける */

    /* 親要素である.game-titleの派手なスタイルを打ち消す設定 */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--white); /* 通常の白色に戻す */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* シンプルなグロー効果に変更 */
    animation: none; /* 点滅アニメーションを解除 */
}
/* ===== Modal Styles (for Ranking) ===== */
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.game-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: rgba(13, 13, 13, 0.9);
    border: 1px solid var(--accent-neon);
    box-shadow: 0 0 25px var(--glow-color);
    border-radius: 10px;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    text-align: center;
    font-family: var(--font-en);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.game-modal:not(.hidden) .modal-content {
    transform: scale(1);
}

.modal-content.wide {
    max-width: 700px;
}

.modal-title {
    color: var(--accent-neon);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px var(--glow-color);
}

.modal-content p {
    margin-bottom: 1rem;
    color: var(--white);
}

.modal-content input[type="text"] {
    width: 100%;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-neon);
    border-radius: 5px;
    color: var(--white);
    font-family: var(--font-en);
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Ranking Board Table */
#ranking-board {
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
    font-size: 0.9rem;
}

#ranking-board table {
    width: 100%;
    border-collapse: collapse;
}

#ranking-board th, #ranking-board td {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

#ranking-board th {
    color: var(--accent-neon);
    font-size: 1rem;
    position: sticky;
    top: 0;
    background: #0d0d0d;
}

#ranking-board td {
    text-align: center;
}

#ranking-board td:nth-child(2) { /* Name */
    text-align: left;
    font-weight: bold;
}

#ranking-board .rank-s { color: #ffd700; }
#ranking-board .rank-a { color: #ff4500; }
#ranking-board .rank-b { color: #8a2be2; }
/* 他のランク色も必要に応じて追加 */

/* ランキングの曲選択エリア */
#ranking-song-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -1rem auto 1.5rem;
    max-width: 450px;
    color: var(--white);
}

/* 曲名表示 */
#ranking-song-title {
    font-family: var(--font-jp);
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0 1rem;
    flex-grow: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 左右の矢印ボタン */
.arrow-btn {
    background: none;
    border: 1px solid var(--accent-neon);
    color: var(--accent-neon);
    font-family: sans-serif;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-btn:hover {
    background-color: var(--accent-neon);
    color: var(--white);
}
/* --- タイトル画面のボタンレイアウト --- */

/* ボタンを縦に並べて中央揃えにするコンテナ */
.title-buttons-container {
    display: flex;
    flex-direction: column; /* ボタンを縦に並べる */
    align-items: center;   /* ボタンを水平方向中央に揃える */
    gap: 1rem;             /* ボタン間の余白 */
    margin: 2.5rem auto 0; /* 操作説明との間の余白を調整 */
}

/* プライマリボタン（START）を大きくするためのスタイル */
.btn.large {
    padding: 0.9rem 4rem; /* 上下左右の余白を大きく */
    font-size: 1.3rem;    /* 文字を大きく */
    letter-spacing: 2px;  /* 文字間隔を広げる */
    font-weight: bold;
}

/* 操作説明のボックスを少し小さく、控えめにする */
.game-instructions {
    max-width: 500px;  /* 最大幅を少し狭くする */
    padding: 1rem 1.5rem; /* 内側の余白を少し詰める */
    font-size: 0.9rem;    /* 文字サイズを少し小さくする */
    border-color: rgba(138, 43, 226, 0.3); /* 枠線の色を少し薄く */
    margin-top: 1rem;
}
/* --- ファンアートのハッシュタグ用スタイル --- */

/* ハッシュタグをインタラクティブに見せる */
code.hashtag {
    cursor: pointer; /* マウスカーソルを指の形に */
    user-select: none; /* テキスト選択を無効化 */
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* マウスを乗せた時の簡単なエフェクト */
code.hashtag:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

/* コピー完了メッセージのスタイル */
.copy-feedback {
    position: absolute; /* クリックされた位置を基準に配置 */
    background-color: #1a1a1a;
    color: #4ade80; /* 明るい緑色 */
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid #4ade80;
    font-family: var(--font-en);
    font-size: 0.9rem;
    z-index: 10;
    pointer-events: none; /* メッセージ自体はクリックできないように */
    animation: fade-out 1.5s ease forwards; /* 1.5秒かけてフェードアウト */
}

/* フェードアウト用のアニメーション */
@keyframes fade-out {
    0% { opacity: 1; transform: translateY(-10px); }
    80% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-20px); }
}
/* --- ABOUTセクションのリンクスタイル調整 --- */
.about-text a.external-link {
    color: var(--white); /* 文字色を他のテキストと同じ白に */
    text-decoration: underline; /* 下線を追加してリンクであることを示す */
    text-decoration-color: rgba(138, 43, 226, 0.6); /* 下線の色を少し控えめな紫に */
    transition: color 0.2s, text-decoration-color 0.2s; /* 色が滑らかに変わるように */
}

/* マウスを乗せた時のスタイル */
.about-text a.external-link:hover {
    color: var(--accent-neon); /* 文字色をアクセントカラーの紫に */
    text-decoration-color: var(--accent-neon); /* 下線の色も同様に */
}

/* --- ヒーローセクションの表示アニメーション --- */

/* アニメーション前の初期状態 */
.hero-section.before-animation {
    opacity: 0;
    transform: scale(1.05); /* 少しだけ大きい状態から開始 */
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* アニメーション後の最終状態 (loadedクラスがついたbody内にある場合) */
body.loaded .hero-section.before-animation {
    opacity: 1;
    transform: scale(1); /* 本来のサイズに戻る */
}

/* ============================================= */
/* ===== レスポンシブ対応 (タブレット) ===== */
/* ============================================= */
@media (max-width: 992px) {
    .music-flex {
      flex-direction: column;
      text-align: center;
    }
}
  
/* ============================================= */
/* ===== レスポンシブ対応 (モバイル) ===== */
/* ============================================= */
@media (max-width: 768px) {
  
    /* --- 全体的な調整 --- */
    .container {
        width: 95%;
    }
    .section {
        padding: 80px 0;
    }
    .section-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        margin-bottom: 3rem;
    }
    /* 背景の縦線を非表示に */
    #eq-left, #eq-right {
        display: none;
    }
  
    /* --- ヘッダー & ナビゲーション --- */
    .logo {
        font-size: 1.3rem;
    }
    .hamburger {
        display: block;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(13, 13, 13, 0.95);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        gap: 3rem;
    }
    .nav-links.active {
        right: 0;
    }
  
    /* --- ヒーローセクション --- */
    .hero-line {
        white-space: normal; /* ← これを追記 */
    }
    .hero-subtitle {
        white-space: normal; /* ← これを追記 */
    }
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
    }
    .hero-buttons .btn {
        width: auto;
        max-width: 300px;
        padding: 0.8rem 1.8rem;
        font-size: 0.9rem;
    }
    .scroll-down {
        bottom: 20px;
    }
  
    /* --- ABOUTセクション --- */
    .about-content {
        flex-direction: column;
        align-items: center; /* ← これを追記 */
        text-align: center;  /* ← テキストも中央揃えに */
        padding: 2rem 1.5rem;
    }
    .about-icon {
        width: 120px;
        height: 120px;
    }
  
    /* --- MUSICセクション --- */
    .streaming-links {
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }
  
    /* --- GAMEセクション --- */
    #game-title-screen {
        /* Flexboxを有効にして、中身を縦に並べる */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直方向の中央揃え */
        height: 100%;            /* 親要素いっぱいに広げる */
        padding: 1rem 0;         /* 上下の余白を少し確保 */
        box-sizing: border-box;  /* paddingを含めて高さを計算 */
        overflow: hidden;        /* 万が一はみ出た要素は隠す */
    }
  
    #game-title-screen .game-title {
        /* フォントサイズを小さめに調整 */
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        /* 上下の余白を詰める */
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
  
    #game-title-screen .game-instructions {
        /* 上下の余白を詰めて、文字も少し小さくする */
        margin: 0.8rem auto;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        line-height: 1.5;
        max-width: 90%;
    }
  
    #game-title-screen .title-buttons-container {
        /* 上の要素との余白を詰める */
        margin-top: 0.8rem;
    }
      
    #game-title-screen .btn.large {
        /* STARTボタンのサイズを調整 */
        padding: 0.8rem 3rem;
        font-size: 1.1rem;
    }
  
    #game-title-screen .btn {
        /* ボタン全体のサイズを調整 */
        padding: 0.6rem 2rem;
        font-size: 1rem;
        min-width: 180px;
    }
    .game-title {
        font-size: clamp(2rem, 10vw, 2.8rem);
        word-break: break-all;
        line-height: 1.3;
        padding: 0 10px;
    }
    .game-description {
        padding: 0 1rem;
    }
    .game-instructions {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 1rem;
        font-size: 0.85rem;
    }
    .title-buttons-container .btn {
        width: 80%;
        max-width: 320px;
    }
    .btn.large {
        font-size: 1.1rem;
    }
    #game-result {
        padding: 1.5rem 1rem;
        width: 95%;
    }
    .result-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
    }
    .result-buttons .btn {
        width: 100%;
    }
    /* ========================================================= */
    /* ===== モバイル横画面時に縦向きを促すためのスタイル ===== */
    /* ========================================================= */
    #rotate-device-prompt {
        position: fixed; /* 画面全体を覆うために fixed に変更 */
        inset: 0;
        background: rgba(0, 0, 0, 0.98);
        z-index: 9999; /* 全ての要素の最前面に */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
        backdrop-filter: blur(8px);
    }

    #rotate-device-prompt.hidden {
        display: none;
    }

    .prompt-content {
        font-family: var(--font-jp);
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .rotate-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1.5rem;
        /* アニメーションをシンプルに */
        animation: subtle-pulse 2.5s ease-in-out infinite;
    }

    /* 新しいアニメーション */
    @keyframes subtle-pulse {
        0%   { transform: scale(1); opacity: 0.8; }
        50%  { transform: scale(1.1); opacity: 1; }
        100% { transform: scale(1); opacity: 0.8; }
    }

    /* ========================================================= */
    /* ===== モバイル縦画面時のゲームUI調整 (最終版) ===== */
    /* ========================================================= */

    /* --- デバイスに応じた操作説明の切り替え --- */

    /* デフォルト(PC)では、スマホ用の説明を非表示 */
    .for-mobile {
        display: none !important;
    }
    .for-pc {
        display: block !important;
    }

    /* bodyに 'is-touch-device' クラスがある場合 */
    body.is-touch-device .for-pc {
        display: none !important; /* PC用を非表示 */
    }
    body.is-touch-device .for-mobile {
        display: block !important; /* スマホ用を表示 */
    }


    /* --- モバイル縦画面時のレイアウト調整 --- */
    /* このブロックは、@media (max-width: 768px) の中に配置してください */
    /*@media (orientation: portrait) {
    
        #game-canvas-wrapper {
            aspect-ratio: unset !important;
            height: auto !important;
            max-height: 85vh !important;
        }

        #game-title-screen {
            padding: 0.5rem !important;
            justify-content: space-evenly !important;
        }

        #game-title-screen .game-title {
            font-size: clamp(1.5rem, 7vw, 2rem) !important; 
            margin-bottom: 0.5rem !important;
            line-height: 1.2 !important;
        }

        #game-title-screen .game-instructions {
            padding: 0.5rem 1rem !important;
            margin: 0.5rem auto !important;
            line-height: 1.6 !important; 
        }
    
        #game-title-screen .platform-instructions p {
            font-size: 0.65rem !important;
        }
    
        #game-title-screen .title-buttons-container {
            display: flex;
            flex-direction: row; 
            justify-content: center; 
            align-items: center;
            gap: 0.8rem !important; 
            margin-top: 0rem !important;
        }
    
        #game-title-screen .title-buttons-container .btn {
            padding: 0.6rem 1rem !important; 
            font-size: 0.8rem !important;   
            min-width: 0; 
            flex-shrink: 1; 
        }

        #game-title-screen .practice-mode-toggle {
            position: static !important; 
            transform: scale(0.9) !important;
            margin-top: 0.8rem; 
        }
    }*/

    
    /* --- FANARTセクション --- */
    .fanart-content {
        padding: 2rem 1.5rem;
    }
  
    /* --- FOOTER --- */
    .footer .social-icons {
        gap: 2rem;
    }
    .footer .social-icons img.social-logo {
        width: 40px;
        height: 40px;
    }
}

/* ========================================================= */
/* ===== モバイル横画面時に縦向きを促すためのスタイル ===== */
/* ========================================================= */
/*#rotate-device-prompt {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    backdrop-filter: blur(5px);
}

#rotate-device-prompt.hidden {
    display: none;
}

.prompt-content {
    font-family: var(--font-jp);
    font-size: 1.1rem;
    line-height: 1.8;
}

.rotate-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
    animation: bounce-rotate 2.5s ease-in-out infinite;
}

@keyframes bounce-rotate {
    0%   { transform: translateY(0) rotate(0); }
    20%  { transform: translateY(0) rotate(0); }
    40%  { transform: translateY(-20px) rotate(90deg); }
    50%  { transform: translateY(0) rotate(90deg); }
    60%  { transform: translateY(-5px) rotate(90deg); }
    100% { transform: translateY(0) rotate(90deg); }
}
*/

/* ===== スマホ/タブレットではゲーム機能を非表示にする ===== */

body.is-touch-device #game,
body.is-touch-device .nav-links a[href="#game"] {
    display: none !important;
}

/* ========================================================= */
/* ===== スマホ/タブレットでは重いエフェクトを非表示にする ===== */
/* ========================================================= */

/* タッチデバイスの場合、パーティクルと背景の縦線を非表示に */
body.is-touch-device #particle-canvas,
body.is-touch-device #eq-left,
body.is-touch-device #eq-right {
    display: none !important;
}

/* タッチデバイスの場合、GSAPによる3Dスクロールアニメーションを無効化 */
body.is-touch-device .section {
    transform: none !important;
    opacity: 1 !important;
}

/* style.css に追記 */
.guideline-list li.coming-soon {
    color: #888; /* 少し薄いグレーにする */
    cursor: not-allowed; /* マウスカーソルを「禁止」マークにする */
}
/* style.css に追記 */

/* キャラクター参考資料リストの余白調整用 */
.character-sheet-list li {
    margin-bottom: 0.8rem; /* ← ここの数値を小さくしてお好みの間隔に調整してください */
}

/* style.css に追記 */

/* ランキングボードのちらつき対策 */
#ranking-board {
    min-height: 420px; /* ボードの最小の高さを設定（数値は適宜調整） */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 「Loading...」のテキストスタイル調整 */
#ranking-board p {
    font-size: 1.1rem;
    color: #888;
}