body { margin: 0; background: #000; overflow: hidden; font-family: sans-serif; }
#header { position: fixed; top: 0; width: 100%; height: 80px; background: white; z-index: 1000; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
#header p { font-weight: bold; margin: 0; }
#info-btn { position: fixed; top: 24px; right: 24px; width: 44px; height: 44px; background: rgba(0,0,0,0.5); color: white; border-radius: 50%; z-index: 1100; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; border: 2px solid white; font-size: 1.2rem; user-select: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.1s; }
#info-btn:active { transform: scale(0.9); }
#credits-info { position: fixed; top: 80px; right: 20px; width: 260px; background: rgba(255,255,255,0.9); padding: 15px; border-radius: 10px; z-index: 1050; box-shadow: 0 4px 15px rgba(0,0,0,0.3); font-size: 0.8rem; line-height: 1.4; color: #333; }
.hidden { display: none !important; }

#scene-container {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    overflow: hidden;
    z-index: 1;
}

#shared-webcam {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 0;
}

.a-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2; /* 共通ビデオの上に重ねる */
}

/* ライブラリが自動生成するカメラビデオを非表示（描画更新は維持しつつ画面外へ退避） */
#arjs-webcam, video.mindar-image-video {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1280px !important;
    height: 720px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* UIコンテナなどの要素は表示不要なので display: none */
.mindar-image-ui-container {
    display: none !important;
}

/* ボタン類 */
#capture-btn { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; background: white; border-radius: 50%; z-index: 1001; border: 5px solid #ccc; cursor: pointer; }
#score-display { position: fixed; bottom: 20px; left: 20px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; border-radius: 20px; font-size: 1.2rem; font-weight: bold; z-index: 1001; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); pointer-events: none; }
#mode-toggle-btn { position: fixed; bottom: 20px; right: 20px; background: #ff9800; color: white; padding: 10px 20px; border-radius: 20px; font-size: 1rem; font-weight: bold; z-index: 1001; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); cursor: pointer; user-select: none; }
#mode-toggle-btn:active { transform: scale(0.95); }

/* タイマー表示 */
#timer-display { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); background: rgba(255, 100, 100, 0.9); color: white; padding: 10px 25px; border-radius: 25px; font-size: 1.5rem; font-weight: bold; z-index: 1001; border: 2px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); pointer-events: none; transition: background 0.3s; }

/* リザルト画面（オーバーレイ） */
#result-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 3000; display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; text-align: center; }
.result-content { background: white; color: #333; padding: 30px; border-radius: 15px; width: 85%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.result-content h2 { margin-top: 0; color: #ff9800; font-size: 1.8rem; }
#result-score { font-size: 1.8rem; font-weight: bold; margin: 15px 0; color: #e91e63; }
#result-message { font-size: 1.1rem; margin-bottom: 25px; line-height: 1.5; color: #444; font-weight: bold; }
.result-buttons button { display: block; width: 100%; padding: 15px; margin-bottom: 12px; border: none; border-radius: 30px; background: #ff9800; color: white; font-size: 1.1rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.result-buttons button:active { transform: scale(0.98); }
.result-buttons button.btn-secondary { background: #888; margin-bottom: 0; }

/* シェアボタン */
.share-section { margin-top: 25px; border-top: 2px dashed #ccc; padding-top: 15px; }
.share-section p { margin: 0 0 10px 0; font-size: 0.9rem; color: #777; font-weight: bold; }
.share-buttons { display: flex; justify-content: center; gap: 8px; }
.share-btn { flex: 1; padding: 12px 0; border: none; border-radius: 30px; color: white; font-weight: bold; cursor: pointer; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.share-btn.unified { background: linear-gradient(45deg, #ff9800, #e91e63); }
.share-btn:active { transform: scale(0.98); }

/* VRボタンを強制非表示 */
.a-enter-vr { display: none !important; }

/* Mode Switch Button */
#gps-switch-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    height: 40px;
    padding: 0 18px;
    background: linear-gradient(135deg, #4caf50, #2e7d32); /* Green gradient for GPS mode toggle */
    color: white;
    border-radius: 20px;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.1s, background 0.3s, box-shadow 0.3s;
    user-select: none;
}
#gps-switch-btn:active {
    transform: scale(0.95);
}
#gps-switch-btn.gps-mode-active {
    background: linear-gradient(135deg, #2196f3, #1565c0); /* Blue gradient when in GPS mode to toggle back */
}

/* 設定ボタン（歯車） */
#settings-btn {
    position: fixed;
    top: 24px;
    right: 80px; /* info-btn(24px) + 44px + 12px余白 = 80px */
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.5);
    color: white;
    border-radius: 50%;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    user-select: none;
    transition: transform 0.1s;
    padding: 0; /* SVGの余計な余白を防ぐ */
}
#settings-btn svg {
    display: block;
}
#settings-btn:active {
    transform: scale(0.9);
}

/* 設定モーダル */
#settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 4000; /* 最前面に表示 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-content {
    background: white;
    color: #333;
    padding: 25px;
    border-radius: 15px;
    width: 80%;
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
}

.settings-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4rem;
    color: #333;
}

.settings-item {
    margin-bottom: 25px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-item label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.settings-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.settings-close-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 30px;
    background: #888;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}

.settings-close-btn:active {
    transform: scale(0.98);
}

/* テストモード サブオプション */
.test-suboptions {
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 12px;
    background: #f0f4f8;
    border-radius: 10px;
    border: 1px solid #d0dbe5;
    text-align: left;
}

.suboptions-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: #0076ff;
    margin-bottom: 10px;
    text-align: center;
}

.settings-item.sub-item {
    margin-bottom: 10px;
    font-size: 0.95rem;
    justify-content: flex-start;
}

.settings-item.sub-item:last-child {
    margin-bottom: 0;
}

/* デバッグ・サイズ表示HUD */
#debug-hud {
    position: fixed;
    top: 90px;
    left: 15px;
    z-index: 1005;
    background: rgba(0, 0, 0, 0.75);
    color: #00ffcc;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: monospace, sans-serif;
    font-size: 0.75rem;
    line-height: 1.4;
    border: 1px solid #00ffcc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    pointer-events: none;
    max-width: 280px;
}

#debug-hud h4 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 0.8rem;
    border-bottom: 1px solid #00ffcc;
    padding-bottom: 3px;
}

/* バージョン表示 */
.version-tag {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #ccc;
    font-size: 0.75rem;
    color: #666;
}

.version-tag a {
    color: #0076ff;
    text-decoration: none;
    font-weight: bold;
}

.version-tag a:hover {
    text-decoration: underline;
}

/* 虫取り網ポップアップアニメーション */
.bug-net-effect {
    position: fixed;
    font-size: 50px;
    pointer-events: none;
    z-index: 2000;
    transition: all 0.3s ease-out;
    transform: scale(0);
}
.bug-net-effect.active {
    transform: scale(1) rotate(-45deg);
    opacity: 1;
}
.bug-net-effect.fade {
    transform: scale(1.2) rotate(0deg);
    opacity: 0;
}