/* --- MyFootprint 全体レイアウト --- */
.footprint-container { max-width: 960px; margin: 20px auto; padding: 0 20px; }
.page-header { text-align: center; margin-bottom: 40px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
.page-header h1 { color: var(--primary-color); margin-bottom: 10px; }
.page-header p { font-size: 1.1rem; color: var(--text-dark); }

/* --- 情報カードグリッド --- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; }
.info-card { background: var(--card-bg); padding: 25px; border-radius: 10px; border: 1px solid var(--border-color); }
.info-card h3 { margin-top: 0; margin-bottom: 20px; color: var(--primary-color); display: flex; align-items: center; gap: 10px; }
.info-card .icon { font-size: 1.5rem; }
.info-card ul { list-style: none; padding: 0; margin: 0; }
.info-card li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.info-card li:last-child { border-bottom: none; }
.info-card strong { color: var(--text-dark); }

/* --- 地図・マウス軌跡 --- */
#map-container { margin-top: 15px; }
#map { height: 250px; border-radius: 8px; border: 1px solid var(--border-color); }
.small-text { font-size: 0.8rem; color: #888; margin-top: 10px; text-align: center; }
#mouse-tracking-container { position: relative; height: 150px; border: 1px dashed var(--border-color); border-radius: 8px; margin-top: 10px; }
#mouse-tracking-container p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666; margin: 0; pointer-events: none; }
#mouse-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- フィンガープリント --- */
.info-card.full-width { grid-column: 1 / -1; }
#fingerprint-hash-container { background-color: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; margin-top: 15px; margin-bottom: 20px; border: 1px solid var(--border-color); }
#fingerprint-hash-container strong { color: var(--text-dark); display: block; margin-bottom: 5px; }
#fingerprint-hash-container code, #canvas-fingerprint { color: #2ecc71; font-family: monospace; word-break: break-all; font-size: 0.9rem; }

/* --- ライブアクティビティ --- */
.status-indicator { font-weight: bold; }
.status-indicator.online { color: #2ecc71; }
.status-indicator.offline { color: #e74c3c; }
.typing-test-container { display: flex; flex-direction: column; gap: 5px; }
#typing-test { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-light); padding: 5px; }
#typing-dynamics { font-size: 0.8rem; color: #888; min-height: 1em; }
.orientation-container { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.phone-model { width: 60px; height: 120px; background: #222; border: 2px solid #555; border-radius: 10px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: transform 0.1s linear; }
.phone-screen { width: 50px; height: 100px; background: #000; }

/* --- アニメーションとツールチップ --- */
.info-card { transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.info-card:not(.is-visible) { opacity: 0; transform: translateY(30px); }
.tooltip-trigger { display: inline-block; position: relative; cursor: help; border-bottom: 1px dashed var(--primary-color); }
.tooltip-content { visibility: hidden; opacity: 0; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 10px 15px; border-radius: 6px; width: 250px; z-index: 10; font-size: 0.9rem; line-height: 1.4; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; }
.tooltip-trigger:hover .tooltip-content { visibility: visible; opacity: 1; }