/* ベース設定：藍色の背景と読みやすい文字色 */
body {
    background-color: #0f172a; /* 深い藍色 */
    color: #cbd5e1; /* 薄いグレー（白すぎず目に優しい） */
    font-family: 'Shippori Mincho', serif; /* 明朝体 */
    line-height: 2.0; /* 小説らしく行間を広めに */
    margin: 0;
    padding: 0;
}

/* リンクの色 */
a {
    color: #93c5fd;
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: #60a5fa;
    text-shadow: 0 0 5px #60a5fa;
}

/* ヘッダーデザイン */
.site-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(to bottom, #020617, #0f172a);
}

.site-header h1 {
    font-size: 2.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    font-weight: 400;
}

.site-header nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* メインコンテンツの幅制限（読みやすくする） */
.container {
    max-width: 800px; /* 横幅を広げすぎない */
    margin: 0 auto;
    padding: 20px;
}

/* ノベル本文のデザイン */
.novel-text p {
    margin-bottom: 2em; /* 段落ごとの間隔 */
    text-align: justify; /* 文字を両端揃えに */
}

/* 区切り線 */
.fade-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(147, 197, 253, 0.5), rgba(0, 0, 0, 0));
    margin: 40px 0;
}

/* 見出しのデザイン */
h2 {
    border-bottom: 1px solid #334155;
    padding-bottom: 10px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

/* フッター */
footer {
    text-align: center;
    padding: 40px;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 50px;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .site-header h1 {
        font-size: 1.8rem;
    }
    .container {
        padding: 15px;
    }
}

/* 世界観：ポエムのような中央揃えデザイン */
.poetic-text {
    text-align: center;
    margin: 60px 0;
    font-style: italic; /* 斜体にして詩的な雰囲気に */
    letter-spacing: 0.15em;
}

/* キャラクター紹介のレイアウト */
.char-card {
    position: relative; /* これが必要 */
    display: flex; /* 画像と文章を横並びにする */
    align-items: center; /* 上下の中心を揃える */
    gap: 40px; /* 画像と文章の間隔 */
    margin-bottom: 60px;
    background: rgba(255, 255, 255, 0.05); /* うっすら背景色をつける */
    padding: 30px;
    border-radius: 15px; /* 角を丸く */
    border: 1px solid rgba(147, 197, 253, 0.2); /* 薄い枠線 */
}

/* キャラクター画像 */
.char-img img {
    max-width: 250px; /* 画像の最大幅 */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(147, 197, 253, 0.2); /* ぼんやり光る影 */
    position: relative;
    z-index: 1; /* ベース */
}

/* キャラクター情報のテキスト */
.char-info h3 {
    margin-top: 0;
    font-size: 1.8rem;
    color: #93c5fd; /* 名前を水色に */
}

.char-role {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
}

/* スマホで見た時の調整（縦並びにする） */
@media (max-width: 700px) {
    .char-card {
        flex-direction: column; /* 縦並び */
        text-align: center;
    }
    
    .char-img img {
        max-width: 80%; /* スマホでは少し大きめに */
    }
}
/* --- 画像切り替えボタンのデザイン --- */

/* スライダーの基準位置設定 */
.slider-container {
    position: relative; /* ボタンを画像の上に重ねるために必要 */
    z-index: 1;
    display: inline-block; /* 画像の幅に合わせる */

}

/* ボタンの共通スタイル */
.nav-btn {
    position: absolute;
    top: 50%; /* 縦の真ん中に */
    transform: translateY(-50%); /* 真ん中補正 */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 20px; /* クリックしやすいように当たり判定を広げる */
    opacity: 0.5; /* 半透明にする */
    transition: 0.3s;
    z-index: 10; /* 画像より手前に表示 */
}

.nav-btn:hover {
    opacity: 1.0; /* マウスを乗せるとくっきり表示 */
    scale: 1.2; /* 少し大きくなる */
}

/* 左の三角ボタン（CSSで描画） */
.prev-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 25px solid #93c5fd; /* 右向きの三角形（色はリンクと同じ水色） */
}
/* 左配置 */
.prev-btn {
    left: -40px; /* 画像の少し左外側へ */
}


/* 右の三角ボタン */
.next-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #93c5fd; /* 左向きの三角形 */
}
/* 右配置 */
.next-btn {
    right: -40px; /* 画像の少し右外側へ */
}

/* スマホ用調整：ボタンを画像の内側に入れる */
@media (max-width: 700px) {
    .prev-btn { left: 0; }
    .next-btn { right: 0; }
}

/* --- BGM機能のデザイン --- */

/* 1. 初回確認モーダル（画面全体を覆う） */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #020617; /* サイト背景に合わせた深い色 */
    z-index: 9999; /* 最前面に表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* フェードアウト用 */
}

/* モーダルの枠 */
.modal-content {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #93c5fd;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 20px rgba(147, 197, 253, 0.3);
}

.modal-content p {
    margin-bottom: 30px;
    font-size: 1.2rem;
}

/* はい/いいえボタン */
.modal-buttons button {
    background: transparent;
    border: 1px solid #93c5fd;
    color: #93c5fd;
    padding: 10px 30px;
    margin: 0 10px;
    cursor: pointer;
    font-family: 'Shippori Mincho', serif;
    transition: 0.3s;
}

.modal-buttons button:hover {
    background: #93c5fd;
    color: #0f172a;
}

/* 2. 左下のBGM切り替えボタン */
.bgm-float-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #64748b;
    color: #cbd5e1;
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    font-family: sans-serif; /* アイコン表示のためゴシック系推奨 */
    font-size: 0.9rem;
    transition: 0.3s;
    display: none; /* 最初は隠しておく（モーダルが消えたら出す） */
}

.bgm-float-btn:hover {
    background: rgba(147, 197, 253, 0.2);
    border-color: #93c5fd;
}

/* 死期タイマーコンテナ（スプライト用） */
.death-timer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px; /* 画像同士の隙間を少し詰める */
    
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translateX(-50%);
    z-index: 100;
    
    /* 初期状態は透明 */
    opacity: 0;
    pointer-events: none; /* タイマー自体がマウスの邪魔をしないように */
    transition: opacity 0.4s ease; /* ふわっと出す */

}

.death-timer-container.is-visible {
    opacity: 1 !important;
    pointer-events: auto; /* 表示されたらクリックできるようにする ★重要 */
}

/* 捕まっている間はキャラクターのホバー判定を邪魔しないように少し調整 */
.death-timer-container.is-captured {
    z-index: 1001;
}

/* すべてのタイマー画像（数字＋コロン）共通設定 */
.timer-img {
    /* スマホで見やすいサイズ感に自動調整 */
    width: 30px; /* サイズが 0 になっていないか確認 */
    height: auto;
    /* PNGが透過なら mix-blend-mode は無くてもOKですが、
       より発光させたいなら screen 等を使うと綺麗です */
    mix-blend-mode: screen
}

/* コロンだけ少し幅を狭めたい場合の調整（オプション） */
.timer-img[src*="colon"] {
    transform: scale(0.9); /* 少し小さく見せる */
    margin: 0 -2px; /* 余白を詰める */
}

/* 全ての画像、または特定のクラスの画像を対象にする */
img {
    /* iOSでの長押しメニュー（コピー・保存）を禁止 */
    -webkit-touch-callout: none;
    /* テキストや画像の選択を禁止 */
    -webkit-user-select: none;
    user-select: none;
   
}

/* キャラクター画像は pointer-events: auto に戻す（ホバーを検知するため） */
#charImage {
    pointer-events: auto !important;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: help; /* カーソルを「？」にすると雰囲気が出ます */
}

/* --- 運命が書き換わる瞬間の演出（ノイズシェーダー風） --- */

/* 変動中のコンテナ全体の発光 */
.death-timer-container.is-changing {
    /* 全体を強く発光させる */
    filter: drop-shadow(0 0 20px rgba(255, 200, 50, 0.8)) brightness(1.5);
    /* ガタガタ震える */
    animation: container-shake 0.05s infinite alternate;
}

@keyframes container-shake {
    0% { transform: translateX(-50%) translate(2px, 0); }
    100% { transform: translateX(-50%) translate(-2px, 0); }
}

/* 個々の数字画像に対する演出 */
.death-timer-container.is-changing .timer-img {
    position: relative;
    /* 元の画像も少し色をずらして震わせる */
    animation: glitch-skew 0.1s infinite linear alternate-reverse;
    /* 色収差のような効果 */
    text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; 
}

/* ノイズテクスチャを使った揺らぎ（マスク効果） */
.death-timer-container.is-changing .timer-img::before,
.death-timer-container.is-changing .timer-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    /* ノイズ画像をリピートさせる */
    background-repeat: repeat;
    /* 合成モードで重ねてランダムさを出す */
    mix-blend-mode: hard-light;
}

/* 1枚目のノイズ（細かい揺らぎ） */
.death-timer-container.is-changing .timer-img::before {
    /* ノイズ1（image_13.png）を指定 */
    background-image: url('assets/texture/image_13.png');
    background-size: 50% 50%; /* 小さくリピート */
    opacity: 0.6;
    /* 高速でランダムに移動させる */
    animation: noise-move-1 0.2s infinite linear;
    /* このノイズで画像を切り抜く（マスク） */
    -webkit-mask-image: url('assets/texture/image_13.png');
    mask-image: url('assets/texture/image_13.png');
    -webkit-mask-size: 50% 50%;
    mask-size: 50% 50%;
}

/* 2枚目のノイズ（大きな歪み） */
.death-timer-container.is-changing .timer-img::after {
    /* ノイズ2（image_14.png）を指定 */
    background-image: url('assets/texture/image_14.png');
    background-size: 150% 150%; /* 大きく引き伸ばす */
    opacity: 0.4;
    /* 異なる速度と方向で移動させる */
    animation: noise-move-2 0.5s infinite linear reverse;
    /* このノイズでも画像を切り抜く */
    -webkit-mask-image: url('assets/texture/image_14.png');
    mask-image: url('assets/texture/image_14.png');
    -webkit-mask-size: 150% 150%;
    mask-size: 150% 150%;
}

/* --- アニメーション定義 --- */

/* 画像本体の歪み */
@keyframes glitch-skew {
    0% { transform: skewX(0deg) scale(1); filter: hue-rotate(0deg); }
    20% { transform: skewX(-5deg) scale(1.02); filter: hue-rotate(90deg); }
    40% { transform: skewX(5deg) scale(0.98); filter: hue-rotate(-90deg); }
    60% { transform: skewX(-2deg) scale(1.01); filter: hue-rotate(45deg); }
    80% { transform: skewX(2deg) scale(0.99); filter: hue-rotate(-45deg); }
    100% { transform: skewX(0deg) scale(1); filter: hue-rotate(0deg); }
}

/* ノイズ1の移動 */
@keyframes noise-move-1 {
    0% { background-position: 0 0; -webkit-mask-position: 0 0; }
    100% { background-position: 100px 100px; -webkit-mask-position: 100px 100px; }
}

/* ノイズ2の移動 */
@keyframes noise-move-2 {
    0% { background-position: 0 0; -webkit-mask-position: 0 0; }
    100% { background-position: -200px 50px; -webkit-mask-position: -200px 50px; }
}

/* 運命が変わった後の穏やかな光（変更なし） */
.death-timer-container.fate-changed {
    filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.6)) brightness(1.2);
    transition: filter 1s ease;
    /* アニメーションを停止 */
    animation: none;
}
.death-timer-container.fate-changed .timer-img,
.death-timer-container.fate-changed .timer-img::before,
.death-timer-container.fate-changed .timer-img::after {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* --- 数字を個別に動かすための設定 --- */
.digit-wrapper {
    display: inline-block; /* これがないと位置が動かせない */
    position: relative;
    transition: transform 0.1s ease-out; /* ふよふよ動くための滑らかさ */
    will-change: transform; /* パフォーマンス最適化 */
}

/* 捕まった時はビシッと整列させたいのでtransitionを変える */
.death-timer-container.is-captured .digit-wrapper {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}