:root { 
    --wk-width: 40px; 
    --bk-width: 26px; 
    --bk-margin: -13px; 
    --pad-gap: 5px; 
}

/* === 基础与全面屏安全区设定 === */
html, body { 
    background-color: #050505; 
    margin: 0; padding: 0; width: 100vw; max-width: 100vw; 
    height: 100dvh; max-height: 100dvh; 
    color: #fff; text-align: center; overflow: hidden; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { 
    padding-top: max(10px, env(safe-area-inset-top)); 
    padding-bottom: max(10px, env(safe-area-inset-bottom)); 
    padding-left: max(10px, env(safe-area-inset-left)); 
    padding-right: max(10px, env(safe-area-inset-right)); 
    box-sizing: border-box; display: flex; flex-direction: column; 
}

#main-page {
    flex: 1; display: flex; flex-direction: column; width: 100%; 
    padding-bottom: 60px; 
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; 
}
#main-page::-webkit-scrollbar { display: none; }

h2 {
    font-size: clamp(1.3rem, 5vw, 2.2rem); 
    font-weight: 700; line-height: 1.2; flex-shrink: 0;
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: clamp(6px, 2vw, 14px); color: #D4D7DF;
    margin-top: 10px; margin-bottom: 5px; white-space: nowrap; z-index: 2; position: relative;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.mk4-badge {
    background-color: #A855F7; color: #ffffff; font-size: 0.75em; 
    padding: 0px 10px 2px 8px; border-radius: 10px; transform: translateY(0.08em);
}

/* ==========================================
   【核心卡片容器】
   ========================================== */
.card { 
    margin: 8px auto; 
    width: calc(100% - 20px); max-width: 900px; 
    padding: 2vmin; 
    /* 将圆角改为 CSS 变量，默认 20px，方便 JS 动态修改 */
    border-radius: var(--card-radius, 20px); 
    box-sizing: border-box; position: relative; z-index: 2;
    background: rgba(230, 230, 240, 0.06); 
    backdrop-filter: blur(20px) brightness(95%) saturate(95%); 
    -webkit-backdrop-filter: blur(20px) brightness(95%) saturate(95%);
    border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.12); 
    box-shadow: 0 20px 60px 10px rgba(0, 0, 0, 0.5), 0 10px 20px 0px rgba(0, 0, 0, 0.05), inset 0 0 20px rgba(0, 0, 0, 0.15);   
}

/* ==========================================
   【核心修复】：为多层嵌套的 Flex 容器注入钢筋骨架
   ========================================== */

#piano-card {
    /* 不仅要占 6 份，还要给一个最小高度保底，防止内部压缩 */
    flex: 6; 
    min-height: 45vh; /* 强制钢琴卡片至少占据屏幕的 45% 高度 */
    display: flex; flex-direction: column; 
}

/* === 1. 物理虚拟 Pad 矩阵 === */
/* === 1. 物理虚拟 Pad 矩阵 (绝对防塌缩版) === */
#pad-matrix { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    /* 去掉不稳定的 rows 设定，让它靠内部元素自然撑开 */
    gap: var(--pad-gap); 
    margin-bottom: 2vmin; 
    flex-shrink: 0; 
    max-width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%;
}

.v-pad { 
    background-color: rgba(99, 99, 99, 0.8); 
    
    /* 核心修复 1：废弃会引发塌缩的 aspect-ratio */
    /* 核心修复 2：利用 padding-top 100% 强行撑出一个完美的正方形！ */
    width: 100%;
    padding-top: 100%; 
    height: 0; /* 高度设为 0，全靠 padding 撑起物理空间 */
    
    border-radius: calc(var(--pad-gap) * 0.2); 
    box-shadow: inset 0 0 8px #2a2a2a; 
    position: relative; 
    overflow: hidden; 
}

/* 因为 .v-pad 里面现在靠 padding 撑开，所以里面的光晕必须要用 absolute 绝对定位铺满 */
.v-pad-light { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    mix-blend-mode: screen; 
    mix-blend-mode: plus-lighter; 
    pointer-events: none; 
    z-index: 1; 
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); 
}


/* === 2. 钢琴与和弦的 1:1 等分包裹器 === */
#piano-lower-half {
    display: flex; flex-direction: column; 
    flex: 1; 
    min-height: 200px; /* 核心修复：必须给包裹器一个最小绝对高度 */
}

#pressed-notes { 
    background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 2vmin; 
    flex: 1; /* 占据包裹器 50% */
    min-height: 60px; /* 核心修复：防止和弦框被压没 */
    width: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); 
}
.chord-primary-text { font-size: clamp(24px, 6vh, 48px); font-weight: bold; color: #fff; }
.chord-secondary-text { font-size: clamp(12px, 3vh, 20px); color: #ccc; font-weight: bold; }

/* === 3. 钢琴键盘区 === */
#keyboard-wrapper { 
    flex: 1; /* 占据包裹器另外 50% */
    min-height: 80px; /* 核心修复：防止键盘被压没 */
    width: 100%; overflow-x: auto; scrollbar-width: none; 
    display: flex; align-items: flex-end; 
}
#keyboard-wrapper::-webkit-scrollbar { display: none; } 
#keyboard { display: flex; width: max-content; user-select: none; height: 100%; }
.key { position: relative; box-sizing: border-box; }

.white-key { width: var(--wk-width); min-width: var(--wk-width); height: 100%; background: rgba(240, 240, 240, 0.9); border: 1px solid rgba(0,0,0,0.2); border-radius: 0 0 6px 6px; z-index: 1; backdrop-filter: blur(5px); }
.black-key { width: var(--bk-width); min-width: var(--bk-width); height: 60%; background: rgba(20, 20, 20, 0.95); border-radius: 0 0 4px 4px; margin-left: var(--bk-margin); margin-right: var(--bk-margin); z-index: 2; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); backdrop-filter: blur(5px); }

/* ==========================================
   【核心修复】：钢琴监控点 (红点与粉点)
   强制响应式大小，强制定位，确保 100% 浮现
   ========================================== */
.active-red.white-key { background: #d0d0d0; border-bottom: 4px solid #888; }
.active-red.black-key { background: #000; }

/* 基础点：必须使用响应式大小和相对底部的百分比定位，防止琴键高度变化时点跑偏 */
.dot { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: clamp(8px, 1.5vh, 14px); 
    height: clamp(8px, 1.5vh, 14px); 
    border-radius: 50%; 
    display: none; /* 默认隐藏 */
    bottom: 12%;   /* 相对高度，永远贴近琴键底部 */
    z-index: 4; 
}
.black-key .dot { 
    bottom: 15%; /* 黑键稍微靠上一点点 */
}

/* 红色：物理按下 (优先级最高) */
.active-red .dot { 
    display: block !important; /* 强制显示 */
    background: #ff2a2a; 
}

/* 粉色：物理松开但被踏板保持 */
.key:not(.active-red).active-pink .dot { 
    display: block !important; /* 强制显示 */
    background: #ff80ab; 
}

/* === 4. 全局灯光控制面板 === */
#color-card {
    flex: 3;
    min-height: 25vh; /* 核心修复：强制调色盘卡片至少占 25% 屏幕高度 */
    display: flex; flex-direction: column; justify-content: space-around;
}
#color-card h3 { font-size: clamp(14px, 3vmin, 18px); margin: 0; flex-shrink: 0; }

#light-panel-wrapper { display: flex; width: 100%; align-items: center; flex: 1; min-height: 120px; /* 给包裹器骨架 */ }
#color-picker-section { width: 60%; display: flex; justify-content: center; align-items: center; border-right: 1px solid rgba(255,255,255,0.1); height: 100%; box-sizing: border-box; padding: 2vmin; overflow: hidden;}
#color-picker-container { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; }

/* 核心修复 4：取消高度 100% 的死板限制，让 iro.js 自由计算 */
.IroWheel { max-height: 200px !important; max-width: 100% !important; aspect-ratio: 1/1; }

#light-info-section { width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2vmin; box-sizing: border-box; }
#light-roman-display { font-size: clamp(12px, 2.5vh, 20px); color: rgba(255,255,255,0.7); margin-bottom: 2px; font-weight: bold; font-family: serif;}
#light-function-display { font-size: clamp(24px, 8vh, 64px); font-weight: bold; color: #fff; margin-bottom: 4px; font-family: serif; letter-spacing: 2px; will-change: text-shadow, color; line-height: 1; }
#light-key-display { font-size: clamp(10px, 2vh, 16px); color: rgba(255,255,255,0.5); font-weight: bold; }

#fab-btn { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.5); color: #fff; font-size: 20px; font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 900; transition: all 0.3s; }
#fab-btn.success { color: #00e676; border-color: rgba(0, 230, 118, 0.4); }

#settings-page { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background-color: rgba(5,5,5,0.85); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); z-index: 1000; display: none; flex-direction: column; align-items: center; padding-top: max(60px, env(safe-area-inset-top)); box-sizing: border-box; }
#settings-page.show { display: flex; }
#back-btn { position: absolute; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; padding: 10px 15px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; cursor: pointer; backdrop-filter: blur(10px); }
select { padding: 12px; border-radius: 8px; width: 100%; max-width: 320px; margin-bottom: 20px; background: rgba(0,0,0,0.5); color: white; border: 1px solid rgba(255,255,255,0.2); font-size: 16px; outline: none; }
.action-btn { padding: 15px 20px; font-size: 16px; font-weight: bold; background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; cursor: pointer; margin: 10px 5px; width: 140px; transition: all 0.3s ease; }
.action-btn.success { background: rgba(170, 0, 255, 0.6); border-color: rgba(170, 0, 255, 0.8); text-shadow: 0 0 10px rgba(255,255,255,0.5); } 
.stop-btn { background: rgba(0,0,0,0.5); }
#status { margin-top: 15px; color: #aaa; font-size: 14px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.IroHandle { display: none !important; }

/* ==========================================
   【核心修复 3】：响应式布局 (高度极小/横屏防重叠保护)
   当屏幕高度极其扁平 (< 800px) 时，压缩卡片宽度和间距，防止纵向溢出
   ========================================== */
@media (max-height: 880px) {
    .card {
        padding: 10px;
        margin: 5px auto;
        /* 在极扁屏幕下，卡片变窄，腾出更多呼吸空间 */
        /* width: 80%; */
        max-width: 700px;
    }
    
    #pad-matrix { margin-bottom: 10px; max-width: 400px;}
    #pressed-notes { margin-bottom: 10px; }
    h2 { margin-top: 5px; font-size: clamp(1rem, 4vw, 1.8rem); }
}

@media (max-height: 600px) {
    /* 极端扁平 (横屏手机)：进一步压缩键盘最低限度，防止和色环打架 */
    .white-key { height: 60px; }
    .black-key { height: 35px; }
    .card { 
        /* width: 70%;  */
        padding: 5px; 
    }
}

/* ==========================================
   【核心修复】：极窄屏幕 (宽高比小于 3:4) 字体微调
   ========================================== */
@media (max-aspect-ratio: 3/4) {
    /* 1. TSD 功能级数罗马数字 (调小 2 号，比如从 8vh 降到 6vh) */
    #light-function-display {
        font-size: clamp(24px, 6vh, 48px) !important;
    }
    
    /* 2. 键盘上方的首选和弦 (调小 1 号) */
    .chord-primary-text {
        font-size: clamp(20px, 5vh, 40px) !important;
    }
    
    /* 3. 键盘上方的备选和弦及 OR (调小 1 号) */
    .chord-secondary-text {
        font-size: clamp(10px, 2.5vh, 16px) !important;
    }
}