/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox用 */
}

/* スクロールバーを非表示（Webkit系ブラウザ） */
::-webkit-scrollbar {
    display: none;
}

/* CSS変数定義 */
:root {
    --button-area-base-height: 150px;  /* ボタンエリアの基本高さ */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);  /* Safe Area */
    --button-area-total-height: calc(var(--button-area-base-height) + var(--safe-area-bottom));  /* 合計高さ */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #000;
    color: #fff;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* ARコンテナ */
.ar-container {
    width: 100%;
    height: calc(100% - 120px - env(safe-area-inset-top, 0px));  /* 上部ステータスバー + ノッチ分を除く */
    margin-top: calc(120px + env(safe-area-inset-top, 0px));  /* ステータスバー + ノッチ分の余白 */
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 102;  /* ボタン(103)より後ろ、ビネット(10)より前 */
}

/* 左右の縦ビネット効果 */
.ar-container::before,
.ar-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 11;  /* ビネット(10)より前、メッセージ(15)より後ろ */
}

.ar-container::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.3) 60%,
        transparent 100%
    );
}

.ar-container::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 10%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.3) 60%,
        transparent 100%
    );
}

/* 下部ビネット効果（ボタンエリアの境目を隠す） */
.bottom-vignette {
    display: none;  /* 一旦無効化して没入感を高める */
}

/* 全体ビネット効果（上部のみ） */
.vignette-overlay {
    position: absolute;
    inset: 0;  /* 親要素（ar-container）全体をカバー */
    pointer-events: none;
    z-index: 10;  /* コンテナ内での相対的な値 */
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 1),
        inset 0 0 100px rgba(0, 0, 0, 0.9),
        inset 0 0 150px rgba(0, 0, 0, 0.8);
    background: linear-gradient(to bottom,
            rgba(0,0,0,0.8) 0%,
            rgba(0,0,0,0.4) 1%,
            rgba(0,0,0,0.2) 2%,
            transparent 3%,
            transparent 100%
        );
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ミニマップモード時のビネット非表示は後述のルールで処理 */

/* マップ表示エリア */
.ar-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--button-area-total-height);  /* ボタンエリア分を動的に確保 */
    width: 100%;
    height: calc(100% - var(--button-area-total-height));  /* 高さも動的に調整 */
    opacity: 0.85;
    z-index: 1;
    overflow: hidden;  /* 回転時のはみ出しを隠す */
    transition: bottom 0.3s ease, height 0.3s ease;  /* ミニマップ切り替え時のアニメーション */
}

/* ミニマップモード時は地図を全画面に拡張 */
body.minimap-active .ar-map {
    bottom: 0;
    height: 100%;
}

/* ドラッグ操作用オーバーレイ */
.map-drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--button-area-total-height);  /* ボタンエリアを動的に除く */
    z-index: 50;  /* 地図より上、コントロールより下 */
    display: none;  /* デフォルトは非表示 */
    cursor: grab;
}

.map-drag-overlay.active {
    display: block;
}

.map-drag-overlay.dragging {
    cursor: grabbing;
}


/* 現在地ボタンのパルスアニメーション */
@keyframes locationPulse {
    0% {
        box-shadow:
            0 0 20px rgba(0, 255, 255, 0.4),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 40px rgba(0, 255, 255, 0.8),
            inset 0 0 30px rgba(0, 255, 255, 0.3),
            0 0 60px rgba(0, 255, 255, 0.4);
    }
    100% {
        box-shadow:
            0 0 20px rgba(0, 255, 255, 0.4),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
}

/* 位置情報要求中のボタンスタイル */
.glass-button.requesting-location {
    animation: locationPulse 1.5s ease-in-out infinite;
    border-color: rgba(0, 255, 255, 1);
    color: #ffffff;
}

/* ミニマップフレーム（小窓） */
.minimap-frame {
    position: fixed;
    top: calc(120px + env(safe-area-inset-top, 0px) + 20px);  /* ステータスバーの下に配置 */
    right: 50px;
    width: 400px;
    height: 250px;
    overflow: hidden;  /* フレーム外をクリップ */
    z-index: 200;
    background: #000;  /* 余白を黒で覆う */
    opacity: 0;  /* フェードイン/アウト用 */
    pointer-events: none;
    transition: opacity 0.6s ease;  /* ゆっくりフェード */
    /* 端の線を防ぐ */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* ミニマップモード時に表示 */
body.minimap-active .minimap-frame {
    opacity: 1;  /* フェードイン */
    pointer-events: auto;
}

/* ミニマップ専用コンテナ */
.minimap-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* レンダリング最適化 */
    will-change: contents;
}

/* ミニマップ内の地図をスケール調整 */
body.minimap-active .minimap-container #map {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center center;
}

/* アニメーション削除 - ミニマップは即座に切り替え */

/* ミニマップのビネット効果（四角い枠） */
.minimap-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow:
        /* より広範囲で滑らかなフェード */
        inset 0 0 80px 40px rgba(0, 0, 0, 0.9),  /* 外側の濃いシャドウ */
        inset 0 0 60px 30px rgba(0, 0, 0, 0.7),  /* 中間層 */
        inset 0 0 40px 20px rgba(0, 0, 0, 0.5),  /* 内側の薄いシャドウ */
        inset 0 0 20px 10px rgba(0, 0, 0, 0.3);  /* 最内側の柔らかいエッジ */
    pointer-events: none;
    z-index: 201;
    /* エッジのレンダリング最適化 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 通常モード時のコンテナ */
.ar-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    opacity: 1;
    transform: scale(1);
}

/* ミニマップモード時はメインコンテナをフェードアウト */
body.minimap-active .ar-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* ミニマップ時のビネット調整 */
body.minimap-active .vignette-overlay {
    display: none;  /* ミニマップモードでは非表示 */
}

/* ミニマップ時の背景 */
body.minimap-active {
    background: #000000;
}

/* ミニマップ時のボタン類を非表示 */
body.minimap-active .bottom-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ミニマップ時は左右のビネットも非表示 */
body.minimap-active .controls-vignette-left,
body.minimap-active .controls-vignette-right {
    display: none;
}

body.minimap-active .search-bar {
    display: none;
}

/* 拡大ボタン */
.minimap-expand-btn {
    position: fixed;
    top: calc(120px + env(safe-area-inset-top, 0px) + 20px + 250px + 10px);  /* ミニマップの下 */
    right: 50px;  /* ミニマップの右端に合わせる */
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: none;  /* 枠線なし */
    color: rgba(0, 255, 255, 1);
    cursor: pointer;
    display: none;
    z-index: 202;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.minimap-expand-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);  /* 少し控えめに */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.minimap-expand-btn svg {
    width: 20px;  /* ボタンサイズに合わせて調整 */
    height: 20px;
    margin: auto;
}

/* ミニマップ時の地図操作無効化 */
body.minimap-active .map-drag-overlay {
    pointer-events: none !important;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .minimap-frame {
        width: 300px;  /* モバイルでは少し小さく */
        height: 200px;
        top: calc(120px + env(safe-area-inset-top, 0px) + 10px);  /* ステータスバーの下に配置 */
        right: 10px;
    }

    .minimap-expand-btn {
        top: calc(120px + env(safe-area-inset-top, 0px) + 10px + 200px + 10px);  /* モバイルサイズに対応 */
        right: 10px;
    }
}

/* 下部メッセージエリア（地図に被る） */
.message-area {
    position: absolute;
    bottom: calc(var(--button-area-total-height) + 140px);  /* ボタンエリアの上により大きなマージンを確保（120px→140px） */
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;  /* ビネット(10)より上に表示 */
    pointer-events: none;
}

.message-content {
    background: linear-gradient(135deg,
        rgba(0, 255, 255, 0.1) 0%,
        rgba(0, 20, 30, 0.9) 50%,
        rgba(0, 255, 127, 0.1) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 24px;
    padding: 20px 32px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 24px;  /* ARグラス用に拡大 */
    font-weight: 500;  /* 少し太く */
    line-height: 1.4;  /* 行間を調整 */
    text-align: center;
    white-space: nowrap;  /* 改行を防ぐ */
    max-width: 90vw;  /* 画面幅の90%まで */
    overflow: hidden;  /* はみ出し部分を隠す */
    text-overflow: ellipsis;  /* 長すぎる場合は...で省略 */
    text-shadow:
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.5),
        0 0 30px rgba(0, 255, 255, 0.3);
    box-shadow:
        0 10px 40px rgba(0, 255, 255, 0.3),
        0 0 80px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-content.show {
    opacity: 1;
    transform: translateY(-5px) scale(1);  /* 少し浮き上がる */
}

/* 下部コントロール（ボタンだけ、背景なし） */
.bottom-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--button-area-total-height);  /* 動的高さ */
    z-index: 103;
    display: flex;
    gap: 12px;
    padding: 15px 20px;  /* 左右に20pxの余白を追加 */
    padding-bottom: calc(15px + var(--safe-area-bottom));  /* Safe Area分を動的に追加 */
    background: rgba(0,0,0,1);  /* 完全に不透明な黒背景 */
    width: 100%;
    justify-content: center;  /* ボタンを中央配置 */
    align-items: center;  /* ボタンを縦中央配置 */
}

/* 左側のビネット効果（専用要素） */
.controls-vignette-left {
    position: fixed;
    left: 0;
    bottom: 0;
    height: var(--button-area-total-height);
    width: 60px;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 20%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 80%,
        transparent 100%
    );
    z-index: 104;  /* ボタンより前面 */
}

/* 右側のビネット効果（専用要素） */
.controls-vignette-right {
    position: fixed;
    right: 0;
    bottom: 0;
    height: var(--button-area-total-height);
    width: 60px;
    pointer-events: none;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 20%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 80%,
        transparent 100%
    );
    z-index: 104;  /* ボタンより前面 */
}

/* ボタン領域のビネット効果（地図との境界） */
.controls-vignette {
    position: absolute;
    top: -30px;  /* ボタン領域の上に重なる */
    left: 0;
    right: 0;
    height: 30px;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.9) 90%,
        rgba(0, 0, 0, 1) 100%
    );
    z-index: -1;  /* ボタンの後ろ */
}

/* 上部ステータスバー */
.top-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;  /* 2倍に拡大 */
    padding-top: env(safe-area-inset-top, 0px);  /* ノッチ対応 */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 103;  /* 検索バー(104)より下に変更 */
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    pointer-events: none;  /* クリックを透過 */
    transition: height 0.3s ease;  /* ナビモード切替時のアニメーション */
}

.status-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  /* 中央揃え */
    gap: 4px;
}

.status-main {
    color: #00ff7f;
    font-size: 36px;  /* ステータスバー拡大に合わせて文字も拡大 */
    font-weight: 500;
}

/* マーキー効果用のラッパー */
.status-text-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    white-space: nowrap;
}

.status-text {
    display: inline-block;
    white-space: nowrap;
}

/* マーキーアニメーション */
.status-text.marquee {
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.status-sub {
    color: rgba(0, 255, 127, 0.7);
    font-size: 28px;  /* ステータスバー拡大に合わせて文字も拡大 */
}

/* ナビゲーション情報表示 */
.nav-instruction {
    display: none;  /* デフォルトは非表示 */
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding: 0 20px;
}

.nav-arrow {
    width: 80px;
    height: 60px;
    filter: drop-shadow(0 0 15px rgba(0, 255, 127, 0.8))
            drop-shadow(0 0 30px rgba(0, 255, 127, 0.5));
    animation: arrowGlow 2s ease-in-out infinite;
}

@keyframes arrowGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 127, 0.8))
                drop-shadow(0 0 30px rgba(0, 255, 127, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(0, 255, 127, 1))
                drop-shadow(0 0 50px rgba(0, 255, 127, 0.7));
        transform: scale(1.05);
    }
}

/* 移動モード選択バー */
.travel-mode-bar {
    position: fixed;
    top: calc(120px + env(safe-area-inset-top, 0px));  /* ステータスバー＋ノッチ対応 */
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 255, 127, 0.3);
    z-index: 102;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    overflow-x: auto;  /* 幅320px端末対応 */
}

.travel-mode-btn {
    flex: 1;
    min-width: 90px;
    max-width: 150px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 127, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* 狭い画面でのレスポンシブ対応 */
@media (max-width: 380px) {
    .travel-mode-btn {
        font-size: 12px;
        gap: 4px;
        min-width: 85px;
    }

    .travel-mode-btn svg {
        width: 18px;
        height: 18px;
    }
}

.travel-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 255, 127, 0.5);
    transform: translateY(-2px);
}

.travel-mode-btn.active {
    background: rgba(0, 255, 127, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.travel-mode-btn svg {
    flex-shrink: 0;
}

.nav-distance {
    font-size: 32px;  /* ARグラス用に大きく */
    font-weight: 600;
    color: #00ff7f;  /* ステータスと同じ緑色 */
    text-shadow: 0 0 15px rgba(0, 255, 127, 0.6);
    flex-grow: 1;
}

/* AR表示風ホログラフィックボタン */
.glass-button {
    flex-shrink: 0;
    width: 110px;  /* 36度視野角ARグラス用にさらに拡大 */
    height: 110px;
    background: transparent;
    border: 2px solid rgba(0, 255, 255, 0.6);  /* シアンの枠線 */
    border-radius: 12px;
    color: rgba(0, 255, 255, 1);  /* シアンの文字 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    position: relative;
    overflow: visible;
    /* ホログラム効果 */
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.4),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.glass-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(
        to bottom,
        rgba(0, 255, 255, 0.1),
        transparent
    );
    pointer-events: none;
}

.glass-button:hover:not(:disabled) {
    border-color: rgba(0, 255, 255, 1);
    transform: scale(1.1);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.6),
        inset 0 0 30px rgba(0, 255, 255, 0.2);
    color: #ffffff;
}

.glass-button:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.8),
        inset 0 0 10px rgba(0, 255, 255, 0.4);
}

.glass-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    border-color: rgba(128, 128, 128, 0.3);
    color: rgba(128, 128, 128, 0.6);
    box-shadow: none;
}

.glass-button.active {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 1);
    color: #ffffff;
    box-shadow:
        0 0 40px rgba(0, 255, 255, 0.8),
        inset 0 0 20px rgba(0, 255, 255, 0.3);
}

.glass-button svg {
    width: 40px;  /* アイコンも拡大 */
    height: 40px;
}

.button-label {
    font-size: 18px;  /* ARグラス用に拡大 */
    font-weight: 700;  /* より太く */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 1;  /* 完全に不透明に */
    text-shadow: 0 0 8px currentColor,
                 0 0 15px rgba(0, 255, 127, 0.5);  /* グロー効果を強化 */
}

/* パルスアニメーション（ナビボタン強調用） */
.glass-button.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0, 255, 127, 0.3),
                    0 0 20px rgba(0, 255, 127, 0.2),
                    inset 0 0 10px rgba(0, 255, 127, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 255, 127, 0.5),
                    0 0 30px rgba(0, 255, 127, 0.4),
                    inset 0 0 15px rgba(0, 255, 127, 0.2);
    }
}

/* 上部検索バー */
.search-bar {
    position: fixed;
    top: -120px;  /* 通常は隠れている（さらに高さ増加） */
    left: 0;
    right: 0;
    height: 120px;  /* 高さをさらに増やして確実に見切れを防ぐ */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.7) 70%,
        transparent 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 104;
    padding: 20px 20px 30px 20px;  /* 下部パディングを増加 */
    transition: top 0.3s ease;
    display: flex;
    align-items: flex-end;  /* 下寄せにして上部に自然な余白を作る */
    justify-content: center;
}

.search-bar.active {
    top: 0;  /* 表示時は下にスライド */
}

.search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;  /* 下部余白を減らして位置調整 */
}

.glass-input {
    width: 100%;
    padding: 20px 110px 20px 24px;  /* 右側にボタン2つ分の余白 */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    outline: none;
    transition: all 0.3s;
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.search-submit {
    position: absolute;
    right: 60px;  /* 閉じるボタンの左に配置 */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 255, 127, 0.1);
    border: 1px solid rgba(0, 255, 127, 0.3);
    border-radius: 8px;
    color: rgba(0, 255, 127, 0.8);
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.search-submit:hover {
    background: rgba(0, 255, 127, 0.2);
    border-color: rgba(0, 255, 127, 0.5);
    color: rgba(0, 255, 127, 1);
}

.close-search {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-search:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* 検索結果 */
.search-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    max-height: calc(100vh - 300px);  /* 画面高さから上下の余白を確保 */
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 127, 0.2);
    border-radius: 12px;
    padding: 10px;
    display: none;
    z-index: 105;  /* 検索バーより上に表示 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.search-results.show {
    display: block;
}

.search-result-item {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(8px);
}

.result-name {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}

.result-address {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* スクロールバーのスタイリング */
.bottom-controls::-webkit-scrollbar {
    height: 6px;  /* 少し太くしてタッチしやすく */
}

.bottom-controls::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.bottom-controls::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);  /* シアン色で視認性向上 */
    border-radius: 3px;
    transition: background 0.3s;
}

.bottom-controls::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.5);
}

.search-results::-webkit-scrollbar {
    width: 4px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* ヘルプモーダル */
.help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
}

.help-modal.show {
    display: block;
}

.help-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.help-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 40px;
    overflow-y: auto;
    box-shadow:
        0 0 40px rgba(0, 255, 127, 0.3),
        inset 0 0 20px rgba(0, 255, 127, 0.1);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.help-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.help-close:hover {
    background: rgba(0, 255, 127, 0.1);
    border-color: var(--primary-color);
    transform: rotate(90deg);
}

.help-content h2 {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.help-sections {
    display: grid;
    gap: 20px;
}

/* ボタン単位のヘルプ項目 */
.help-button-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 127, 0.2);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
}

.help-button-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 127, 0.4);
}

/* ボタンアイコン */
.help-button-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(0, 255, 127, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-button-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

/* ボタン説明 */
.help-button-desc {
    flex: 1;
}

.help-button-desc strong {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.help-button-desc p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* キーボードセクション（既存スタイル維持） */
.help-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 127, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
}

.help-section h3 {
    color: var(--secondary-color);
    font-size: 20px;
    margin-bottom: 15px;
}

.help-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-section li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.8;
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.help-section li:before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.help-section strong {
    color: var(--primary-color);
    font-weight: 500;
}

/* レスポンシブ対応 - タブレット・スマホ */
@media (max-width: 1024px) {
    /* 下部コントロールを横スクロール可能に */
    .bottom-controls {
        overflow-x: auto;
        overflow-y: visible;  /* ビネット表示のためvisibleに変更 */
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;  /* iOS用スムーズスクロール */
        scroll-behavior: smooth;
        padding-left: 30px;  /* 左右を30pxに統一 */
        padding-right: 30px;  /* 左右を30pxに統一 */
        /* モバイル時の配置調整 */
        left: 0;
        transform: none;
        width: 100%;
    }

    /* モバイル用controls-vignetteの調整 */
    .controls-vignette {
        position: fixed;  /* モバイルでは固定配置に変更 */
        bottom: var(--button-area-total-height);  /* ボタンエリアの上端に配置 */
        top: auto;
        left: 0;
        right: 0;
        height: 30px;
        background: linear-gradient(to top,  /* グラデーション方向を反転 */
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.9) 30%,
            rgba(0, 0, 0, 0.6) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            transparent 100%
        );
    }

    /* ボタンサイズは大きめを維持 */
    .glass-button {
        width: 100px;  /* 少し縮小するが十分な大きさ */
        height: 100px;
        flex-shrink: 0;  /* 縮小を防ぐ */
    }

    .button-label {
        font-size: 16px;  /* タブレットでも大きく */
    }

    .message-content {
        font-size: 20px;  /* タブレットでも大きめに */
        padding: 16px 24px;
        max-width: 85vw;  /* タブレットでは少し狭く */
        white-space: normal;  /* タブレットでは改行を許可 */
        overflow: visible;
        text-overflow: clip;
    }

    /* 検索バーも幅調整 */
    .search-container {
        max-width: calc(100% - 40px);
        margin: 0 20px;
    }
}

/* さらに小さい画面（スマホ縦向き） */
@media (max-width: 480px) {
    .glass-button {
        width: 85px;  /* さらに少し縮小 */
        height: 85px;
    }

    .button-label {
        font-size: 14px;  /* スマホでも読みやすく */
    }

    .glass-button svg {
        width: 35px;
        height: 35px;
    }

    /* メッセージエリアの位置調整 */
    .message-area {
        bottom: 140px;  /* ボタンに被らないよう調整 */
        max-width: 95%;  /* スマホでは画面幅いっぱいに */
    }

    .message-content {
        font-size: 18px;  /* スマホでは少し小さく */
        padding: 14px 20px;
        max-width: 90vw;  /* スマホでは画面幅いっぱい */
        white-space: normal;  /* スマホでは改行を許可 */
        overflow: visible;
        text-overflow: clip;
    }
}

/* 低解像度・小画面端末対応 */
@media (max-height: 700px) {
    /* 検索結果の高さを制限 */
    .search-results {
        max-height: calc(100vh - 250px);  /* より小さく制限 */
    }

    /* 検索バーの高さを調整 */
    .search-bar {
        height: 100px;  /* 少し低く */
        padding: 15px 20px 20px 20px;
    }

    /* ボタンエリアの高さを調整 */
    :root {
        --button-area-base-height: 120px;  /* 低い画面用に縮小 */
    }

    .glass-button {
        width: 80px;  /* ボタンを少し小さく */
        height: 80px;
    }

    .glass-button .button-label {
        font-size: 12px;  /* 小画面でも最低限の大きさ */
    }
}