/* --- 基本レイアウト（2カラム） --- */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: sans-serif;
    overflow: hidden;
    background: #411277;
    /* 画面内で左右領域がスクロール */
}

/* --- レイアウトを 3 カラムに（左＝メニュー / 中＝履歴 / 右＝通常ボタン） --- */
#layout {
    display: grid;
    grid-template-columns: 420px 420px 1fr;
    /* 幅は好みで調整可 */
    gap: 12px;
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
}

/* ★履歴カラム */
#history-col {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    overflow: hidden;
    background: linear-gradient(to top, rgb(174, 141, 235) 0%, #5e24ca 100%);
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 8px;
}

/* タイトルの見た目（共通） */
.history-title {
    font-weight: bold;
    font-size: 16px;
    padding: 6px 10px;
    margin: 4px 0 8px;
    color: #000000;
}

/* ★履歴本体：縦積み＋縦スクロール（PC） */
#history-bar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* ←縦方向 */
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    background: #6a359c;
    border-radius: 6px;
}

#history-bar button {
    width: 100%;
    font-size: 14px;
    padding: 6px 10px;
    background: #eee;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
}

/* 左カラム（従来の fixed-header を流用） */
#fixed-header {
    position: sticky;
    /* 画面上に貼り付きつつ、左カラム内だけスクロール */
    top: 0;
    align-self: start;
    height: calc(100vh - 20px);
    overflow: auto;
    background: linear-gradient(to top, #e4c664 0%, #9c8311 100%);
    z-index: 10;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 右カラム：上＝ボタン(縦スクロール) / 下＝履歴(横スクロール) */
#right-pane {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    overflow: hidden;
}

#scroll-area {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
}

/* ---- 各種パーツ ---- */
#wave-canvas {
    display: block;
    background: #111;
    width: 100%;
    height: 100px;
    margin: 10px 0;
}

#player {
    width: 100%;
    margin: 10px 0;
}

#button-container button {
    margin: 6px 6px;
    font-size: 16px;
    padding: 8px;
    border-radius: 12px;
}

select,
input {
    margin: 10px 5px;
    padding: 5px;
    font-size: 16px;
}

button {
    margin: 5px 0;
    padding: 8px 12px;
    font-size: 16px;
    /* 既定値を適正化（以前の 6px を撤回） */
    background: #e8e7ff;
    color: #000000;
}

.button-group {
    margin-bottom: 6px;
}

/* 再生中ハイライト＆アニメ */
button.playing {
    background-color: #ffdd57;
    color: #000;
    animation: pop 0.2s ease;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* 年タブ（機能は既存のまま） */
.year-tab {
    margin-right: 5px;
    padding: 6px 10px;
    font-size: 15px;
    background: #eee;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.year-tab.active {
    background: #0078d4;
    color: #fff;
}

/* トースト */
#now-playing {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 999;
    font-size: 20px;
    animation: fadein 0.2s;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


/* 追加：モバイル用履歴（初期は隠す） */
#history-bar-mobile {
    display: none;
    flex: 0 0 auto;
    display: none;
    /* ←二重記述でもOK。念のため */
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    background: #f8f8f8;
    border-top: 1px solid #ccc;
    border-radius: 8px;
}

#history-bar-mobile button {
    font-size: 14px;
    padding: 4px 10px;
    background: #ddd;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}


/* 小型操作ボタン群（ランダム/リピート/履歴再生/消去/保存/再現） */
#btn-random,
#btn-repeat,
#btn-history,
#btn-history-loop,
#btn-history-stop,
#btn-open-save,
#btn-open-restore,
#btn-clear-history,
#btn-save-srhist-1,
#btn-save-srhist-2,
#btn-save-srhist-3,
#btn-restore-srhist-1,
#btn-restore-srhist-2,
#btn-restore-srhist-3 {
    margin: 4px;
    padding: 8px 10px;
    font-size: 14px;
    background: #eeeeee;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: auto;
    transition: background 0.2s;
}

#btn-random:hover,
#btn-repeat:hover,
#btn-history:hover,
#btn-history-loop:hover,
#btn-history-stop:hover,
#btn-open-save:hover,
#btn-open-restore:hover,
#btn-clear-history:hover,
#btn-save-srhist-1:hover,
#btn-save-srhist-2:hover,
#btn-save-srhist-3:hover,
#btn-restore-srhist-1:hover,
#btn-restore-srhist-2:hover,
#btn-restore-srhist-3:hover {
    background: #e0e0e0;
}

/* --- 小画面：1カラムに折りたたみ（上：左カラム、下：右カラム） --- */
@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    #layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    #fixed-header,
    #right-pane {
        height: auto;
        position: static;
        overflow: visible;
    }

}

@media (max-width: 900px) {

    /* PC 用の履歴バーは隠す */
    #history-bar {
        display: none !important;
    }

    /* モバイル用履歴を表示＋縦積み（下に追加） */
    #history-bar-mobile {
        display: flex !important;
        flex-direction: column;
        /* ←縦方向に並べる */
        overflow-x: hidden;
        overflow-y: auto;
        /* ←縦スクロールに切り替え */
        max-height: 40vh;
        /* ←画面下を圧迫しないよう制限（お好みで調整） */
        gap: 6px;
        padding: 10px;
    }

    #history-bar-mobile button {
        width: 100%;
        /* ←横幅いっぱい */
        white-space: normal;
        /* ←長いタイトルは折り返す */
        word-break: break-word;
    }
}

/* 履歴タイトルの共通見た目 */
.history-title {
    font-weight: bold;
    font-size: 16px;
    padding: 6px 10px;
    margin: 6px 0 4px;
    color: #333;
}

/* 既定（PC想定）：デスクトップ用タイトルを表示、モバイル用は非表示 */
#history-title-desktop {
    display: block;
}

#history-title-mobile {
    display: none;
}

/* モバイル時は履歴をプレイヤー直下に出すため、タイトルも切り替え */
@media (max-width: 900px) {
    #history-title-desktop {
        display: none !important;
    }

    #history-title-mobile {
        display: block !important;
    }
}

/* ===== Dark Indigo/Purple theme (blue-purple + amber + white + pale pink) ===== */
:root {
    --violet: #4C3FB9;
    /* 青紫（アクセント） */
    --violet-700: #3A2F8F;
    /* 青紫 濃 */
    --violet-900: #241B55;
    /* 青紫 最濃 */
    --indigo-950: #0F0B1A;
    /* ほぼ黒の紫がかった下地 */
    --panel: #1A1430;
    /* パネル面 */
    --card: #221A40;
    /* カード/ボタン面 */
    --line: #2F2551;
    /* 枠線(低コントラスト) */
    --amber: #E0AA2C;
    /* オレンジ寄りの黄：控えめ */
    --pale: #E8C9D6;
    /* 淡いピンク（やや落ち着かせた） */
    --text: #ECE8F7;
    /* 文字（明るいが白より柔らかい） */
    --text-muted: #BDB6D4;
    /* 補助テキスト */
}

/* ページ背景：暗い青紫系のグラデ */
body {
    background: radial-gradient(1200px 800px at 20% 10%, var(--violet-900) 0%, var(--indigo-950) 60%, #0A0812 100%);
    color: var(--text);
}

/* 左メニュー（固定領域） */
#fixed-header {
    background: linear-gradient(180deg, var(--panel) 0%, var(--card) 100%);
    color: var(--text);
}

/* 履歴カラム（デスクトップ） */
#history-col {
    background: var(--panel);
    border: 1px solid var(--line);
}

/* 通常ボタン領域 */
#right-pane #scroll-area {
    background: transparent;
}

/* 一般ボタン（通常の声ボタン含む） */
#button-container button,
button {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
}

#button-container button:hover,
button:hover {
    background: #2A2250;
}

/* 年タブ */
.year-tab {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
}

.year-tab:hover {
    background: #2A2250;
}

.year-tab.active {
    background: var(--violet);
    color: #fff;
    border-color: transparent;
}

/* 再生中ハイライトは控えめの黄で視認性を確保 */
button.playing {
    background-color: var(--amber) !important;
    color: #1b1b1b !important;
}

/* 履歴（PC/モバイル共通の色） */
#history-bar,
#history-bar-mobile {
    background: var(--card);
    border: 1px solid var(--line);
}

#history-bar button,
#history-bar-mobile button {
    background: #2A2250;
    color: var(--text);
    border: 1px solid var(--line);
}

#history-bar button:hover,
#history-bar-mobile button:hover {
    background: #35296A;
}

/* 小型操作ボタン群（ランダム/リピート/履歴再生/消去/保存/再現） */
#btn-random,
#btn-repeat,
#btn-history,
#btn-history-loop,
#btn-history-stop,
#btn-clear-history,
#btn-save-srhist-1,
#btn-save-srhist-2,
#btn-save-srhist-3,
#btn-restore-srhist-1,
#btn-restore-srhist-2,
#btn-restore-srhist-3,
#btn-save-hist-1,
#btn-save-hist-2,
#btn-save-hist-3,
#btn-restore-hist-1,
#btn-restore-hist-2,
#btn-restore-hist-3 {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
}

#btn-random:hover,
#btn-repeat:hover,
#btn-history:hover,
#btn-history-loop:hover,
#btn-history-stop:hover,
#btn-clear-history:hover,
#btn-save-srhist-1:hover,
#btn-save-srhist-2:hover,
#btn-save-srhist-3:hover,
#btn-restore-srhist-1:hover,
#btn-restore-srhist-2:hover,
#btn-restore-srhist-3:hover,
#btn-save-hist-1:hover,
#btn-save-hist-2:hover,
#btn-save-hist-3:hover,
#btn-restore-hist-1:hover,
#btn-restore-hist-2:hover,
#btn-restore-hist-3:hover {
    background: #2A2250;
}

/* 入力系 */
select,
input {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
}

/* 波形＆トーストもトーンを合わせる */
#wave-canvas {
    background: #090614;
}

#now-playing {
    background: var(--violet-700);
    color: #fff;
}

/* ==== Cyber Tri-Panel: Left=Gold-Frame / Middle&Right=Dark Neon (no motion) ==== */
:root {
    /* 左（ゴールド系 + ネオン用） */
    --gold-1: #F4C66A;
    --gold-2: #A66A0A;
    --gold-ink: #EED9A1;
    /* 左パネル内の文字色を金系に */
    --gold-edge: rgba(255, 213, 90, .55);
    /* フレームの縁/枠 */
    --gold-glow: rgba(255, 200, 80, .55);
    /* 外側グロー */
    --gold-glow-strong: rgba(255, 200, 80, .85);
    --left-panel-bg: #0B0A07;
    /* 黒めの面（左パネル中央） */

    /* 中央（ダーク面：サイバー寄り） */
    --paper: #0E0C19;
    --paper-ink: #EAF0FF;
    --paper-line: rgba(0, 234, 255, .45);
    --paper-chip: #151936;

    /* 右（青紫系ダーク） */
    --violet: #5F57FF;
    --violet-700: #433AD2;
    --violet-900: #17123E;
    --right-grad-deep: #07061A;

    /* 共通アクセント */
    --amber: #FFD35C;
    --glow-mag: rgba(122, 92, 255, .5);
    --glow-cy: rgba(0, 234, 255, .55);
}

/* === 左カラム（メニュー）：黒い面＋金色フレームだけ発光（静的） === */
#fixed-header {
    position: relative;
    background: var(--left-panel-bg) !important;
    /* 面は黒め */
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    box-shadow:
        0 0 0 2px rgba(255, 225, 140, .22) inset,
        /* 内側の薄い縁 */
        0 0 24px var(--gold-glow),
        /* 外側に金グロー */
        0 8px 28px rgba(0, 0, 0, .45);
    /* 落ち影でアングラ感 */
    overflow: hidden;
    /* 擬似要素のはみ出し防止 */
}

#fixed-header::before {
    /* 金のダブルフレーム（静的） */
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold-edge);
    box-shadow:
        0 0 0 2px rgba(255, 210, 110, .18) inset,
        0 0 36px 4px var(--gold-glow) inset;
    /* フレーム内部がうっすら発光 */
    pointer-events: none;
}

#fixed-header::after {
    /* 中央をさらに落として“額縁”感 */
    content: "";
    position: absolute;
    inset: 10px;
    background: radial-gradient(120% 80% at 50% 20%, transparent 0%, transparent 60%, rgba(0, 0, 0, .45) 100%);
    border: 1px solid rgba(255, 210, 110, .15);
    box-shadow: 0 0 18px rgba(255, 200, 80, .15) inset;
    pointer-events: none;
}

/* 左パネル内の操作系：黒ガラス×金縁（ホバーで少しだけ発光） */
#fixed-header .year-tab,
#fixed-header button,
#fixed-header select,
#fixed-header input {
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    box-shadow:
        0 0 0 1px rgba(255, 225, 140, .18) inset,
        0 2px 8px rgba(0, 0, 0, .35);
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}

#fixed-header .year-tab:hover,
#fixed-header button:hover,
#fixed-header select:hover,
#fixed-header input:hover {
    background: #14120D;
    border-color: var(--gold-glow-strong);
    box-shadow:
        0 0 0 1px rgba(255, 225, 140, .28) inset,
        0 0 12px var(--gold-glow);
}

#fixed-header .year-tab:active,
#fixed-header button:active {
    transform: translateY(1px);
}

/* アクティブな年タブはソリッド金＋控えめ発光（可読性重視） */
#fixed-header .year-tab.active {
    background: linear-gradient(180deg, #FFD873 0%, #FFB300 100%);
    color: #2B1D00;
    border-color: rgba(255, 195, 60, .9);
    box-shadow: 0 0 12px rgba(255, 200, 80, .35), 0 0 0 1px rgba(255, 225, 140, .28) inset;
}

/* === 中央（履歴カラム）：暗め＋ネオングロー（変更なし） === */
#history-col {
    background: var(--paper) !important;
    border: 1px solid var(--paper-line) !important;
    box-shadow: 0 0 0 1px rgba(0, 234, 255, .12) inset, 0 8px 28px rgba(0, 0, 0, .35);
}

#history-title-desktop {
    color: var(--paper-ink);
}

#history-bar,
#history-bar-mobile {
    background: var(--paper) !important;
    border: 1px solid var(--paper-line) !important;
    box-shadow: 0 0 24px 0 var(--glow-cy) inset;
    scroll-behavior: smooth;
    scroll-padding: 8px;
    /* 余白ぶんだけ止まり位置にゆとり */
}

#history-bar button,
#history-bar-mobile button {
    background: var(--paper-chip);
    color: var(--paper-ink);
    border: 1px solid var(--paper-line);
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}

#history-bar button:hover,
#history-bar-mobile button:hover {
    background: #1B1F46;
    border-color: rgba(0, 234, 255, .75);
    box-shadow: 0 0 10px var(--glow-cy);
}

#history-bar button:active,
#history-bar-mobile button:active {
    transform: translateY(1px);
}

/* === 右カラム（通常ボタン領域）：青紫ダーク + ネオン強化 === */
#right-pane {
    background: linear-gradient(180deg, var(--violet-900) 0%, var(--right-grad-deep) 100%) !important;
    box-shadow: 0 0 60px rgba(95, 87, 255, .18) inset;
}

#right-pane #scroll-area {
    background: transparent !important;
}

/* 右側の通常ボタン：輪郭強め＋サイバー */
#right-pane #button-container button {
    background: rgba(16, 18, 38, .82) !important;
    color: #c5c3e7 !important;
    border: 1px solid rgba(200, 190, 255, .35) !important;
    box-shadow:
        0 0 0 1px rgba(200, 190, 255, .15) inset,
        0 0 12px var(--glow-mag),
        0 6px 20px rgba(0, 0, 0, .35);
    text-shadow: 0 0 6px rgba(122, 92, 255, .45);
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}

#right-pane #button-container button:hover {
    background: rgba(34, 32, 78, .92) !important;
    border-color: rgba(200, 190, 255, .6) !important;
    box-shadow: 0 0 16px var(--glow-mag), 0 0 0 1px rgba(200, 190, 255, .22) inset;
}

#right-pane #button-container button:active {
    transform: translateY(1px);
}

/* 再生中は右側ボタンを“黄金”に強制 */
#right-pane #button-container button.playing {
    /* ショートハンドで上書きし、!important も付ける */
    background: rgba(0, 204, 255, 0.45) !important;
    color: #f2ddff !important;
    border-color: rgba(90, 167, 255, 0.75) !important;
    box-shadow: 0 0 14px rgba(92, 144, 255, 0.45) !important;
    text-shadow: none !important;
    /* 必要なら読みやすさ優先で消す */
}

/* 履歴の再生中ハイライト（優先度と!importantで確実に上書き） */
#history-bar button.playing,
#history-bar-mobile button.playing {
    background: rgba(0, 204, 255, 0.45) !important;
    color: #dee3e6 !important;
    border-color: rgba(90, 203, 255, 0.75) !important;
    box-shadow: 0 0 10px rgba(92, 163, 255, 0.4) !important;
}


/* 再生中ハイライト（視認性重視のアンバー） */
button.playing {
    background-color: var(--amber) !important;
    color: #4002b4 !important;
    box-shadow: 0 0 14px rgba(163, 92, 255, 0.45);
}

/* 入力系（左に合わせた暗色ガラス） */
select,
input {
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
}

/* 波形・トーストもサイバートーンに */
#wave-canvas {
    background: #070515;
}

#now-playing {
    background: linear-gradient(90deg, rgba(0, 234, 255, .95) 0%, rgba(122, 92, 255, .95) 100%);
    color: #0A0A12;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 18px var(--glow-cy);
}

/* モバイル（履歴＝縦・プレイヤー直下）も暗めを維持 */
@media (max-width: 900px) {
    #history-bar-mobile {
        background: var(--paper) !important;
        border: 1px solid var(--paper-line) !important;
        box-shadow: 0 0 24px 0 var(--glow-cy) inset;
    }

    #history-title-mobile {
        color: var(--paper-ink);
    }
}

/* キーボード操作の視認性（フォーカス） */
button:focus-visible,
.year-tab:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(0, 234, 255, .9);
    outline-offset: 2px;
}

/* カテゴリー用の行（任意・横詰め） */
#cate-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 14px;
}

/* カテゴリーボタン（year-tab と同デザイン、別クラス） */
.cate-tab {
    margin-right: 5px;
    padding: 6px 10px;
    font-size: 14px;
    background: #eee;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.cate-tab:hover {
    background: #e0e0e0;
}

/* アクティブ表示（選択中カテゴリー） */
.cate-tab.active {
    background: #0078d4;
    color: #fff;
}

/* 右カラムの縦スクロールをスムーズに */
#scroll-area {
    scroll-behavior: smooth;
    scroll-padding: 12px;
    /* 少し余白を残して止める */
}

/* === 履歴の保存/再現オーバーレイ（左カラムと同サイズで左からスライド） === */
#fixed-header {
    position: relative;
}

/* 念のため */

#history-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: rgba(12, 11, 8, .92);
    /* 左パネルに合わせた黒ガラス */
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    box-shadow:
        0 0 0 2px rgba(255, 225, 140, .22) inset,
        0 0 24px var(--gold-glow),
        0 8px 28px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    transform: translateX(-105%);
    /* 初期は左外 */
    opacity: 0;
    pointer-events: none;
    transition: transform .24s ease, opacity .24s ease;
}

#history-overlay.show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

#history-overlay .overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gold-edge);
    background: rgba(12, 11, 8, .85);
}

#overlay-title {
    font-weight: 700;
    letter-spacing: .02em;
}

#overlay-close {
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

#overlay-close:hover {
    background: #14120D;
}

#overlay-list {
    padding: 10px;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* 1行＝スロットN + 削除 + シェア */
.overlay-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
}

.overlay-row .slot-main {
    text-align: left;
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.overlay-row .slot-main:hover {
    background: #14120D;
}

.overlay-row .slot-del,
.overlay-row .slot-share {
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.overlay-row .slot-del:hover,
.overlay-row .slot-share:hover {
    background: #14120D;
}

/* 履歴：1行（声ボタン + ↑ ↓ ×） */
.hist-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 6px;
    align-items: center;
}

/* 声ボタン（メイン） */
.hist-main {
    width: 100%;
    text-align: left;
    background: var(--paper-chip);
    color: var(--paper-ink);
    border: 1px solid var(--paper-line);
    border-radius: 8px;
    padding: 6px 10px;
}

/* コントロール（↑ ↓ ×） */
.hist-ctrl {
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink);
    border: 1px solid var(--gold-edge);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 2.2em;
}

.hist-ctrl:hover {
    background: #14120D;
}

/* 再生中ハイライトは既存ルールが .playing を上書きするのでそのまま */

/* オーバーレイのスロット行のボタンを、通常ボタンと同じサイズ感に */
#history-overlay .overlay-row .slot-main,
#history-overlay .overlay-row .slot-del,
#history-overlay .overlay-row .slot-share {
    font-size: 16px;
    /* ← 全体の既定と同じ */
    padding: 4px 6px;
    /* ← 全体の既定と同じ */
    border-radius: 12px;
    /* ← 右側の声ボタンと同じ丸み */
}

/* === iPhone/モバイル最終上書き（枠が内容に追従するように） === */
@media (max-width: 900px) {
    #layout {
        height: auto !important;
        /* グリッド全体は自然な高さに */
    }

    #fixed-header {
        position: relative !important;
        /* ★ 疑似要素(::before/::after)の基準にする */
        height: auto !important;
        /* 内容に合わせて伸長 */
        overflow: visible !important;
        /* 切り捨てを防止 */
    }

    #history-col {
        height: auto !important;
        /* 履歴カラムも自動伸長 */
        overflow: visible !important;
    }
}

/* 右カラムを絶対配置の基準にする */
#right-pane {
    position: relative;
}

/* トップへボタン（初期は非表示） */
#btn-scroll-top {
    position: absolute;
    /* PC: 右カラム内で重ねる */
    top: 24px;
    right: 24px;
    z-index: 1200;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: rgba(16, 18, 38, .9);
    color: #EDEBFF;
    border: 1px solid rgba(200, 190, 255, .35);
    box-shadow: 0 0 10px rgba(122, 92, 255, .35);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, box-shadow .18s ease, transform .06s ease;
}

#btn-scroll-top:hover {
    box-shadow: 0 0 14px rgba(122, 92, 255, .5);
}

#btn-scroll-top.show {
    opacity: 1;
    pointer-events: auto;
}

/* iPhone/モバイル：画面右下に固定配置（親に依存しない） */
@media (max-width: 900px) {
    #btn-scroll-top {
        position: fixed;
        /* 画面に固定 */
        top: auto;
        right: 16px;
        bottom: 16px;
        left: auto;
        width: 48px;
        height: 48px;
    }
}

/* 右カラムのボタン数カウンタ */
#button-count {
    position: sticky;
    top: 0;
    /* 右カラム内の最上部に貼り付く */
    z-index: 5;
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(16, 18, 38, .85);
    color: #EDEBFF;
    border: 1px solid rgba(200, 190, 255, .25);
    box-shadow: 0 0 8px rgba(122, 92, 255, .25);
    font-size: 14px;
    letter-spacing: .02em;
}

/* ========== 注意モーダル ========== */
#notice-overlay[hidden] {
    display: none !important;
}

#notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    /* 既存オーバーレイより前面に */
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .5);
    /* 背景の半透明 */
    backdrop-filter: blur(2px);
}

#notice-box {
    position: relative;
    width: min(92vw, 560px);
    max-height: 85vh;
    overflow: auto;
    background: var(--paper, #0E0C19);
    color: var(--paper-ink, #EAF0FF);
    border: 1px solid var(--paper-line, rgba(0, 234, 255, .45));
    box-shadow:
        0 0 24px var(--glow-cy, rgba(0, 234, 255, .55)),
        0 10px 28px rgba(0, 0, 0, .45);
    border-radius: 14px;
    padding: 18px 18px 56px;
    /* 右下の×用に余白を広めに */
}

#notice-title {
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: .06em;
}

#notice-body {
    font-size: 15px;
    line-height: 1.7;
}

/* × は右下配置 */
#notice-close {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 44x;
    height: 44px;
    border-radius: 12px;
    background: rgba(12, 11, 8, .82);
    color: var(--gold-ink, #1F1400);
    border: 1px solid var(--gold-edge, rgba(255, 213, 90, .45));
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 213, 90, .35);
}

#notice-close:hover {
    background: #14120D;
}