.header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- ヘッダー：PC版でタイトルを中央、メニューを右端へ --- */
/* ヘッダー全体の高さを確保し、基準位置（relative）にする */
.main-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* 基本は中央 */
    width: 100%;
    height: 50px; /* 必要に応じて調整 */
    padding: 0 10px;
}

/* タイトルコンテナを画面の絶対的な中央に配置 */
.title-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 自身の幅の半分戻して真ん中に */
    white-space: nowrap;
    z-index: 1;
    cursor: pointer;
}

.title-text {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

/* 右側のボタンエリアは右端に固定 */
.header-side-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* タイトルの上に重ならないように */
}

/* 三点リーダーのボタンサイズ調整（必要であれば） */
#menu-dots {
    background: transparent;
    border: none;
    color: #0f0;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}
#menu-dots {
    background: transparent;
    border: 1px solid #00ff41;
    color: #00ff41;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px #00ff41;
    cursor: pointer;
}
#menu-dots {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
}

#menu-toggle-btn {
    position: absolute !important;
    right: 10px; /* 右端に固定 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

/* クリック時のインタラクション（タイトルクリックでメニューを開くため） */
.title-container:active .title-text {
    text-shadow: 0 0 30px #00ff41;
    opacity: 0.8;
}

.title-container {
    flex: 1; /* 利用可能なスペースを占有 */
    min-width: 0; /* 省略処理（ellipsis）を有効にするために必要 */
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.mode-selector {
    display: flex;
    gap: 5px;
}

#mode-select {
    font-size: 14px;
    min-width: 80px;
    max-width: 50px;
    background-color: #001400; /* プルダウン展開時の背景 */
    color: #00ff41;            /* プルダウン展開時の文字色 */
    outline: none;
}

#mode-select:focus {
    border-color: #d35400;
}

.action-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* 数値入力ボックスのスタイル調整 */
#scramble-count {
    width: 45px;
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
}

button {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: #333;
    color: white;
    transition: 0.2s;
}

#shuffle-btn {
    background: #27ae60;
    font-weight: bold;
}

#timer-display, #counter-display {
    color: #0f0;
    font-size: 16px;
    font-weight: bold;
}

.hint {
    margin-top: 15px;
    color: #888;
    font-size: 13px;
    text-align: center;
    border: 1px dashed #444;
    padding: 10px;
    border-radius: 5px;
}


/* リセットボタンの強調（新規） */
#reset-btn {
    background: #c0392b !important; /* 濃い赤 */
    font-weight: bold;
}

#reset-btn:hover {
    background: #e74c3c !important;
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 9000;
}

.log-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #222;
	padding: 20px;
	width: 90%;
	max-width: 500px;
	border-radius: 8px;
	border: 1px solid #444;
}

.log-section {
	margin-bottom: 20px;
}

.log-section input {
	width: 100%;
	padding: 10px;
	margin: 8px 0;
	background: #000;
	border: 1px solid #555;
	color: #fff;
}

.log-controls {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

/* 解析 オーバーレイダイアログ */
.media-overlay-top {
    position: absolute;
    top: 20px; /* さらに上へ移動し、タイトルとほぼ同高度に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* 幅を自動にしてコンパクトに */
    min-width: 280px;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid #0f0; /* 枠線を細く */
    border-radius: 4px;
    padding: 4px 8px; /* 余白を最小限に */
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 1000; /* ヘッダーより前面に */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    transition: all 0.3s ease;
}
.media-overlay-top .m-group {
    display: flex !important;
    justify-content: center !important; /* 横方向の中央寄せ */
    align-items: center !important;     /* 縦方向の中央寄せ */
    gap: 10px !important;              /* ボタン同士の隙間 */
    width: 100% !important;
    margin: 5px 0 10px 0 !important;   /* 上下の余白調整 */
}

.media-overlay-top.active {
    display: flex !important;
}
/* ログパネル（ダイアログ）のオーバーレイ */
#log-overlay {
    z-index: 2000; /* メディアコントロールより確実に前面へ */
}

/* コンプリート時の通知なども必要に応じて調整 */
#status-board {
    z-index: 2000;
}

.history-container {
    max-height: 250px; /* 表示領域を少し拡大 */
    overflow-y: auto;
    background: #111;
    border: 1px solid #444;
    margin-bottom: 5px;
    /* スムーズなスクロール */
    -webkit-overflow-scrolling: touch;
}

.history-item:active {
    background: #333; /* 選択時のフィードバック */
}

.history-item button:hover {
    transform: scale(1.2);
    color: #ff0000 !important;
}

/* ログスイッチボタンの基本スタイル */
.log-switch-btn {
    padding: 8px 10px;
    font-size: 14px;
    background: #333;
    border: 1px solid #444;
    transition: all 0.2s;
}

/* 無効時 */
.log-disabled {
    background: #444 !important;
    opacity: 0.6;
    filter: grayscale(1);
}

.log-switch-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    background: #222;
    border: 1px solid #444;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 有効時（REC中）の発光 */
.log-switch-btn.active-rec {
    color: #ff0000;
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
    background: #311;
}

#log-check-icon {
    font-size: 16px;
}

/* V2用アップロードパネルのスタイル */
.v2-upload-panel {
    margin: 10px 0;
    padding: 10px;
    background: rgba(40, 40, 40, 0.9);
    border-radius: 8px;
    border: 1px solid #444;
}

.v2-status {
    font-size: 11px;
    color: #888;
    margin-top: 5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#v2-media-uploader .m-btn {
    min-width: 80px;
}

#v2-media-uploader .replay-status {
    font-size: 10px;
    letter-spacing: 1px;
    color: #888;
}

/* 動画パネルを画面中央に配置 */
#v2-video-uploader {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid #00ffcc;
    border-radius: 4px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 1);
    z-index: 3000;
    padding: 15px 20px;
    -webkit-backdrop-filter: blur(15px); /* Safari用警告解消 */
    backdrop-filter: blur(15px);         /* 標準 */
}

#v2-video-uploader .v2-panel-header {
    font-size: 10px;
    color: #00ffcc; /* ネオンカラー */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

#v2-video-uploader .v2-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #00ffcc;
    color: #00ffcc;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

#v2-video-uploader .v2-btn:hover {
    background: rgba(0, 255, 204, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

#v2-video-uploader .v2-info {
    font-size: 9px;
    color: #555;
    margin-top: 15px;
    text-align: center;
}


/* 統合されたコンテナ */
.scramble-composite-box {
    display: flex;
    align-items: center;
    gap: 4px; /* 入力欄とボタンの間の隙間 */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #0f0; /* 緑のボーダー */
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

/* スピナー（数値入力フィールド）のネオン調スタイル */
.scramble-number-field {
    background: #000 !important; /* 灰色を廃止し黒に */
    color: #0f0 !important; /* 文字をネオン緑に */
    border: none !important; /* 親ボックスで線を描くため消す */
    outline: none;
    width: 45px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 14px;
}

/* Chrome/Safariなどのスピンボタン（上下矢印）を少し見やすく調整 */
.scramble-number-field::-webkit-inner-spin-button,
.scramble-number-field::-webkit-outer-spin-button {
    filter: invert(1) hue-rotate(90deg) brightness(1.5); /* 矢印を緑っぽく調整 */
    cursor: pointer;
}

/* セレクトボックスや他のボタンもネオン感を統一 */
.neon-select, .icon-btn, .log-switch-btn {
    border: 1px solid #0f0;
    background: #000;
    color: #0f0;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
    transition: all 0.2s ease;
}
/* スクランブル実行ボタン自体の色をネオン調に固定 */
.scramble-exec-btn {
    background: transparent !important; /* 親の背景を活かす、または #000 */
    border: none !important;            /* 親の枠線を使うのでボタン自身の枠は消す */
    color: #0f0 !important;             /* アイコンの色をネオン緑に */
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* ボタンの中のSVGアイコンのサイズ調整（必要に応じて） */
.scramble-exec-btn svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.8)); /* アイコン自体を発光させる */
}

/* ホバー時の演出：発光を強くする */
.scramble-exec-btn:hover {
    background: rgba(0, 255, 0, 0.2) !important;
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5);
}

/* アクティブ（クリック中）の演出 */
.scramble-exec-btn:active {
    transform: scale(0.9);
    filter: brightness(1.5);
}
.neon-select:focus, .icon-btn:hover {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
    background: rgba(0, 40, 0, 0.4);
}


.menu-panel {
    z-index: 10000 !important;
    position: relative; /* z-indexを有効にするために必須 */
    /* オーバーレイのための絶対配置 */
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);

    /* 非表示状態 */
    display: none;

    /* ネオン調の装飾 */
    background: rgba(0, 20, 0, 0.95); /* 深い緑の背景 */
    border: 2px solid #00ff41;       /* ネオン看板のような境界線 */
    border-radius: 12px;
    box-shadow: 0 0 15px #00ff41,    /* 外側の光 */
                inset 0 0 10px #00ff41; /* 内側の光 */
    
    padding: 5px 10px;
    width: 90%;
    max-width: 400px;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

/* 表示時の制御 */
.menu-panel.open {
    display: flex;
}

.analyze-slider-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
    padding: 0 6px;
    box-sizing: border-box;
}

#analyze-slider {
    width: 100%;
    max-width: 800px;
}

.replay-status {
    width: 100%;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #bfffbf;
    text-shadow: 0 0 4px rgba(0,255,136,0.8), 0 0 10px rgba(0,255,136,0.5);
}

.m-btn {
    position: relative;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    color: #bfffbf;
    background: linear-gradient(180deg, #0a0a0a 0%, #101010 100%);
    border: 1px solid #00ff88;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0,255,136,0.6), 0 0 10px rgba(0,255,136,0.35), inset 0 0 6px rgba(0,255,136,0.25);
    cursor: pointer;
    transition: all 0.15s ease;
}

.m-btn:hover {
    color: #eaffea;
    box-shadow: 0 0 6px rgba(0,255,136,0.9), 0 0 16px rgba(0,255,136,0.6), inset 0 0 8px rgba(0,255,136,0.35);
}

.m-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(0,255,136,0.4), inset 0 0 10px rgba(0,255,136,0.6);
}

.m-btn.stop {
    color: #ffdada;
    border-color: #ff2a2a;
    box-shadow: 0 0 4px rgba(255,42,42,0.7), 0 0 12px rgba(255,42,42,0.45), inset 0 0 6px rgba(255,42,42,0.35);
}

.m-btn.stop:hover {
    box-shadow: 0 0 6px rgba(255,42,42,0.9), 0 0 18px rgba(255,42,42,0.65), inset 0 0 8px rgba(255,42,42,0.45);
}

#analyze-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: transparent;
}

#analyze-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(90deg, #00ff88, #00ffaa);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0,255,136,0.8), 0 0 14px rgba(0,255,136,0.5);
}

#analyze-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, #00ff88, #00ffaa);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0,255,136,0.8), 0 0 14px rgba(0,255,136,0.5);
}

#analyze-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    background: #0a0a0a;
    border: 2px solid #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,255,136,0.9), 0 0 14px rgba(0,255,136,0.7);
    cursor: pointer;
}

#analyze-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #0a0a0a;
    border: 2px solid #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,255,136,0.9), 0 0 14px rgba(0,255,136,0.7);
    cursor: pointer;
}

#v2-media-uploader .m-btn {
    font-size: 14px;
    padding: 7px 18px;
    box-shadow: 0 0 6px rgba(0,255,136,0.8), 0 0 16px rgba(0,255,136,0.5), inset 0 0 8px rgba(0,255,136,0.35);
}

#v2-media-uploader .m-btn:hover {
    box-shadow: 0 0 10px rgba(0,255,136,1), 0 0 24px rgba(0,255,136,0.7), inset 0 0 10px rgba(0,255,136,0.45);
}

#v2-media-uploader .m-btn.stop {
    box-shadow: 0 0 6px rgba(255,60,60,0.9), 0 0 18px rgba(255,60,60,0.6), inset 0 0 8px rgba(255,60,60,0.4);
}

/* --- History List Styles --- */
.history-empty {
    color: #666;
    padding: 20px;
    text-align: center;
}
.history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #333;
    cursor: pointer;
}
.history-icon-box {
    font-size: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 4px;
}
.history-status {
    font-size: 14px;
    flex-shrink: 0;
}
.history-info {
    flex-grow: 1;
    font-size: 12px;
}
.history-date {
    color: #aaa;
}
.history-stats {
    display: flex;
    justify-content: space-between;
}
.history-time {
    color: #00ffcc;
    font-weight: bold;
}
.history-steps {
    color: #888;
}
.history-delete-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.2s;
}
.history-delete-btn:hover {
    transform: scale(1.2);
}

/* data-label の中身（LやS）を疑似要素として描画 */
.icon-btn[data-label]::after {
    content: attr(data-label) !important;
    position: absolute !important;
    
    /* 真ん中に配置するための設定 */
    color: #000000;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 見た目：どーんと大きく、かつアイコンも見えるように */
    font-size: 30px !important; /* ボタンサイズに合わせて調整 */
    font-family: "Arial Black", sans-serif !important;
    font-weight: 900 !important;
}