/* 中文 UI + 引导/按钮布局修正（safe-area，避免错位） */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* 启动壳 */
#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d8d3c8;
  transition: opacity .45s ease, visibility .45s ease;
}
#boot.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-card {
  text-align: center;
  padding: 28px 32px;
  max-width: 88vw;
}
.boot-title {
  font-size: 18px;
  letter-spacing: .28em;
  font-weight: 600;
  color: #1a1a1c;
  margin-bottom: 10px;
}
.boot-sub {
  font-size: 12px;
  color: rgba(26,26,28,.55);
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.boot-bar {
  width: min(220px, 60vw);
  height: 3px;
  margin: 0 auto;
  background: rgba(26,26,28,.12);
  border-radius: 99px;
  overflow: hidden;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: #4a4f8a;
  border-radius: 99px;
  animation: bootslide 1.1s ease-in-out infinite;
}
@keyframes bootslide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* 右上角控制：避开刘海与圆角 */
.controls {
  top: max(10px, calc(var(--safe-t) + 8px)) !important;
  right: max(12px, calc(var(--safe-r) + 8px)) !important;
  left: auto !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(48vw, 220px);
  gap: 8px !important;
}
.ctrl-btn {
  white-space: nowrap;
  min-height: 32px;
  padding: 6px 12px !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

/* 底部键位提示：不贴死边缘，避免与 footer 打架 */
.keyhint {
  left: max(14px, calc(var(--safe-l) + 10px)) !important;
  right: auto !important;
  bottom: max(48px, calc(var(--safe-b) + 40px)) !important;
  max-width: min(560px, calc(100vw - 28px)) !important;
  z-index: 16 !important;
  word-break: break-word;
  white-space: normal !important;
}

/* 底部声明 */
.legal-footer {
  left: max(10px, var(--safe-l));
  right: max(10px, calc(var(--safe-r) + 8px)) !important;
  bottom: max(6px, calc(var(--safe-b) + 4px)) !important;
  max-width: none !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.45;
  z-index: 6 !important;
}

/* 触摸区：底部安全区 + 不挡主操作 */
.tz-dpad {
  left: max(16px, calc(var(--safe-l) + 12px)) !important;
  bottom: max(90px, calc(var(--safe-b) + 80px)) !important;
}
.tz-ab {
  right: max(16px, calc(var(--safe-r) + 12px)) !important;
  bottom: max(100px, calc(var(--safe-b) + 88px)) !important;
}

/* 面板在小屏更稳 */
.panel-inner {
  margin: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  width: min(560px, calc(100vw - 24px));
}
.panel-inner h2 {
  letter-spacing: .18em !important;
}

/* 提示气泡防止出屏 */
.tooltip {
  max-width: min(280px, calc(100vw - 20px));
  white-space: normal !important;
  z-index: 25 !important;
}

.toast {
  bottom: max(56px, calc(var(--safe-b) + 48px)) !important;
  max-width: min(90vw, 420px);
  text-align: center;
}

@media (max-width: 720px) {
  .controls {
    max-width: calc(100vw - 20px);
  }
  .keyhint {
    font-size: 10px !important;
    bottom: max(56px, calc(var(--safe-b) + 48px)) !important;
  }
  .tz-dpad {
    width: 132px !important;
    height: 132px !important;
  }
  .tz-dpad > div {
    width: 44px !important;
    height: 44px !important;
  }
  .tz-dpad .tz-up { left: 44px !important; }
  .tz-dpad .tz-down { left: 44px !important; }
  .tz-dpad .tz-left { top: 44px !important; }
  .tz-dpad .tz-right { top: 44px !important; }
}