@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body { 
    background-color: #1e1e1e; color: #fff; margin: 0; overflow: hidden; 
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;
    user-select: none; -webkit-user-select: none;
}

/* --- 設定画面 --- */
#settings-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1e1e1e 0%, #2c3e50 100%); z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.setting-group { 
    margin-bottom: 30px; width: 90%; max-width: 400px; 
    background: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.setting-title { font-size: 1.1rem; color: #00d4ff; margin-bottom: 15px; text-align: center; font-weight: bold; }
.btn-group { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    width: 100%;
}
.select-btn {
    padding: 12px 5px; border: 2px solid #555; background: #333; color: #fff;
    border-radius: 12px; cursor: pointer; font-size: 0.9rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.select-btn.active { 
    background: #007bff; border-color: #007bff; 
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
    transform: translateY(-2px);
}
input[type="number"] { 
    padding: 12px; border-radius: 12px; border: 2px solid #444; 
    background: rgba(0, 0, 0, 0.2); color: #fff; width: 100%; box-sizing: border-box;
    text-align: center; font-size: 1.1rem; grid-column: span 3;
    margin-top: 5px;
}
#start-app-btn {
    padding: 16px 60px; 
    background: linear-gradient(to right, #00b09b, #96c93d); 
    color: white; border: none;
    border-radius: 50px; font-size: 1.4rem; font-weight: bold; 
    margin-top: 20px; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}
#start-app-btn:active { transform: scale(0.95); }

/* --- メイン画面 --- */
#info-panel {
    position: absolute; top: 0; left: 0; width: 100%; z-index: 20;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); 
    padding: 20px 0 40px;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none; 
}
.info-row { display: flex; justify-content: space-around; width: 100%; align-items: center; pointer-events: auto; }
.info-item { text-align: center; }
.info-label { font-size: 0.7rem; color: #ccc; }
.info-value { font-size: 1.5rem; font-weight: bold; }
#status-text { color: #4caf50; font-size: 1.2rem; min-width: 100px; }

#finger-container {
    margin-top: 10px; display: flex; flex-direction: column; align-items: center;
    background: rgba(0,0,0,0.5); padding: 5px 20px; border-radius: 10px;
}
#finger-visualizer {
    font-family: monospace; font-size: 1.5rem; color: #00FF00; letter-spacing: 5px; font-weight: bold;
}
#finger-labels {
    font-size: 0.8rem; color: #fff; margin-top: 2px; letter-spacing: 8px; font-weight: bold;
}

#celebration-msg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: gold; font-weight: bold; text-shadow: 0 0 10px red;
    display: none; z-index: 50; text-align: center; width: 100%;
}

.container { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #000; }
video, canvas { position: absolute; width: 100%; height: 100%; object-fit: cover; }
#reset-btn {
    position: absolute; bottom: 20px; right: 20px; z-index: 30;
    padding: 10px 20px; background: #555; color: white; border: none; border-radius: 5px; pointer-events: auto;
}