*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #8b6d4b;
  background-image:
    /* 木纹细线 */
    repeating-linear-gradient(
      1.5deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.05) 2px,
      rgba(0,0,0,0.05) 4px
    ),
    repeating-linear-gradient(
      -0.8deg,
      transparent,
      transparent 30px,
      rgba(60,30,0,0.08) 30px,
      rgba(60,30,0,0.08) 32px
    ),
    /* 木纹中线 */
    repeating-linear-gradient(
      0.5deg,
      transparent,
      transparent 80px,
      rgba(40,20,0,0.07) 80px,
      rgba(40,20,0,0.07) 83px
    ),
    /* 明暗变化 */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06) 0%,
      transparent 40%,
      transparent 60%,
      rgba(0,0,0,0.06) 100%
    ),
    /* 基底暖木色 */
    linear-gradient(
      175deg,
      #c4a078 0%,
      #b89068 15%,
      #c8a47c 30%,
      #b48c60 45%,
      #c0986c 55%,
      #b8956e 70%,
      #c4a070 85%,
      #b0885c 100%
    );
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  padding: 20px;
}

/* ===== 设备主体 ===== */
.device {
  width: 960px;
  background: linear-gradient(180deg, #fefcf9 0%, #fdf9f3 3%, #faf5ec 50%, #f5efe4 100%);
  border-radius: 28px;
  padding: 28px 32px 24px;
  box-shadow:
    0 16px 48px rgba(80,60,30,0.18),
    0 0 0 2px #d4c8b0,
    0 0 0 5px #f0e8d8,
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.brand {
  text-align: center;
  color: #c4a882;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 5px;
  margin-bottom: 18px;
}

/* ===== 顶部按钮行 ===== */
.top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0 24px;
  position: relative;
}
.mode-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 共享按钮基样 */
.mode-circle, .mode-btn {
  width: 56px;
  height: 56px;
  border: 2px solid #d8ccb8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #faf7f1 0%, #efe8da 100%);
  box-shadow: 0 3px 8px rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: all 0.12s;
  position: relative;
}
.mode-circle:hover, .mode-btn:hover {
  background: linear-gradient(180deg, #fffdf9 0%, #f5eee2 100%);
  border-color: #c8b898;
  box-shadow: 0 4px 12px rgba(80,60,30,0.18);
}
.mode-circle:active, .mode-btn:active {
  box-shadow: 0 1px 3px rgba(80,60,30,0.1);
  transform: translateY(1px);
}
.mode-circle .icon, .mode-btn .icon {
  font-size: 19px;
  line-height: 1;
  color: #8b7355;
}
.mode-circle .lbl, .mode-btn .lbl {
  font-size: 8px;
  color: #b8a088;
  letter-spacing: 0.5px;
  margin-top: 1px;
  white-space: nowrap;
}

/* 电源：圆形，固定左侧 */
.mode-circle {
  border-radius: 50%;
  width: 52px; height: 52px;
  position: absolute;
  left: 24px;
}
.mode-circle .icon { font-size: 20px; }

/* 模式键：正方形 */
.mode-btn {
  border-radius: 10px;
}


/* ===== NFC 插卡槽 ===== */
.card-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  width: 190px;
  height: 18px;
  background: #d8ceb8;
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(80,50,20,0.2);
  border: 1px solid #c4b898;
}
.card-slot-label {
  font-size: 8px;
  color: #a09078;
  letter-spacing: 2px;
}

/* ===== 键盘区 ===== */
.keyboard-wrapper {
  background: #f7f2e8;
  border-radius: 14px;
  padding: 14px 10px;
  margin-bottom: 14px;
  border: 2px solid #e0d8c8;
}
.key-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 8px;
  color: #b8a888;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.key-labels span { width: 12.5%; text-align: center; }

.keyboard {
  position: relative;
  display: flex;
  height: 210px;
}

.white-key {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #fefefe 0%, #fafaf7 2%, #f4f4ee 60%, #e8e4da 100%);
  border: 1.5px solid #a89880;
  border-top: 2.5px solid #b8a890;
  border-radius: 0 0 7px 7px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition: background 0.7s ease-out, box-shadow 0.8s ease-out, transform 0.1s, border-top-color 0.7s ease-out;
  box-shadow: 0 4px 8px rgba(80,60,30,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  color: #c0b8a8;
  font-size: 12px;
}
.white-key .key-hint {
  position: absolute;
  bottom: 34px;
  font-size: 10px;
  color: #d0c8b8;
  letter-spacing: 1px;
}
.white-key.active {
  transition: background 0.06s, box-shadow 0.06s, transform 0.06s, border-top-color 0.06s;
  background: linear-gradient(180deg, #fffbe0 0%, #ffeeb0 30%, #f4f0dc 60%, #e8e4d4 100%);
  box-shadow:
    0 1px 2px rgba(80,60,30,0.12),
    0 0 35px rgba(255,200,20,0.7),
    0 0 70px rgba(255,180,20,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-top-color: #e0c040;
  transform: translateY(2px);
  color: #c8a020;
}
.white-key.active .key-hint {
  color: #d4a830;
}

.black-key {
  position: absolute;
  width: 34px;
  height: 62%;
  background: linear-gradient(180deg, #fefefe 0%, #fafaf7 2%, #f4f4ee 60%, #e8e4da 100%);
  border: 1.5px solid #9a8a70;
  border-top: 2.5px solid #a89878;
  border-radius: 0 0 5px 5px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.7s ease-out, box-shadow 0.8s ease-out, transform 0.1s, border-top-color 0.7s ease-out;
  box-shadow: 0 4px 8px rgba(80,60,30,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  color: #c0b8a8;
  font-size: 10px;
}
.black-key .key-hint {
  position: absolute;
  bottom: 26px;
  font-size: 9px;
  color: #d0c8b8;
  letter-spacing: 1px;
}
.black-key.active {
  transition: background 0.06s, box-shadow 0.06s, transform 0.06s, border-top-color 0.06s;
  background: linear-gradient(180deg, #fff 0%, var(--glow, #ffeeb0) 30%, #f4f0dc 60%, #e8e4d4 100%);
  box-shadow:
    0 1px 2px rgba(80,60,30,0.12),
    0 0 35px var(--glow, rgba(255,200,20,0.7)),
    0 0 70px var(--glow, rgba(255,180,20,0.45)),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-top-color: var(--glow, #e0c040);
  transform: translateY(2px);
  color: var(--glow, #c8a020);
}
.black-key.active .key-hint {
  color: var(--glow, #d4a830);
}


/* Black key positions — 7 keys at every white-key gap */
.black-key:nth-child(1) { left: calc(12.5% - 17px); }  /* C#  */
.black-key:nth-child(2) { left: calc(25.0% - 17px); }  /* D#  */
.black-key:nth-child(3) { left: calc(37.5% - 17px); }  /* E#  */
.black-key:nth-child(4) { left: calc(50.0% - 17px); }  /* F#  */
.black-key:nth-child(5) { left: calc(62.5% - 17px); }  /* G#  */
.black-key:nth-child(6) { left: calc(75.0% - 17px); }  /* A#  */
.black-key:nth-child(7) { left: calc(87.5% - 17px); }  /* B#  */

/* ===== 积木模式 - 激活按钮 ===== */
.mode-circle.active-mode, .mode-btn.active-mode {
  background: linear-gradient(180deg, #fff8e1 0%, #ffe082 100%) !important;
  border-color: #ffb300 !important;
  box-shadow: 0 0 18px rgba(255,179,0,0.55), 0 0 36px rgba(255,179,0,0.28), 0 3px 8px rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.mode-circle.active-mode .icon, .mode-btn.active-mode .icon {
  color: #e6a000 !important;
}
.mode-circle.active-mode .lbl, .mode-btn.active-mode .lbl {
  color: #cc8e00 !important;
}

/* ===== 积木模式 - 亮灯按键 ===== */
.white-key.block-lit,
.black-key.block-lit {
  animation: blockPulse 1.6s ease-in-out infinite;
}

.white-key.block-lit {
  box-shadow:
    0 4px 8px rgba(80,60,30,0.18),
    0 0 14px var(--block-color, #ffbb00),
    0 0 30px var(--block-color, #ffbb00),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-bottom-color: var(--block-color, #ffbb00);
}

.black-key.block-lit {
  box-shadow:
    0 4px 8px rgba(80,60,30,0.18),
    0 0 14px var(--block-color, #ffbb00),
    0 0 30px var(--block-color, #ffbb00),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-bottom-color: var(--block-color, #ffbb00);
}

/* Pending confirm - faster, brighter pulse */
.white-key.block-pending,
.black-key.block-pending {
  animation: blockPulseFast 0.55s ease-in-out infinite;
}
.white-key.block-pending {
  box-shadow:
    0 4px 8px rgba(80,60,30,0.18),
    0 0 24px var(--block-color, #ffbb00),
    0 0 48px var(--block-color, #ffbb00),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.black-key.block-pending {
  box-shadow:
    0 4px 8px rgba(80,60,30,0.18),
    0 0 24px var(--block-color, #ffbb00),
    0 0 48px var(--block-color, #ffbb00),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

@keyframes blockPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}
@keyframes blockPulseFast {
  0%, 100% { filter: brightness(1.08); }
  50% { filter: brightness(1.35); }
}

/* ===== 采样模式 - 录音状态 ===== */
.mode-circle.recording, .mode-btn.recording {
  animation: recordPulse 0.7s ease-in-out infinite;
  background: linear-gradient(180deg, #ffe8e8 0%, #ffcccc 100%) !important;
  border-color: #ff4444 !important;
  box-shadow: 0 0 16px rgba(255,68,68,0.6), 0 0 32px rgba(255,68,68,0.3), 0 3px 8px rgba(80,60,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.mode-circle.recording .icon, .mode-btn.recording .icon {
  color: #e03030 !important;
}
.mode-circle.recording .lbl, .mode-btn.recording .lbl {
  color: #cc3333 !important;
}

@keyframes recordPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}