/* 车载平板专用样式 */

/* H8-101车载平板专用适配 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .container {
    padding: 80rpx !important;
  }
  
  .canvas-container {
    margin-bottom: 60rpx !important;
  }
  
  .section-title {
    font-size: 48rpx !important;
    font-weight: bold !important;
  }
  
  .sector-button {
    min-width: 180rpx !important;
    min-height: 120rpx !important;
    font-size: 40rpx !important;
    font-weight: bold !important;
    border-radius: 15rpx !important;
  }
  
  .action-button {
    min-width: 220rpx !important;
    min-height: 130rpx !important;
    font-size: 44rpx !important;
    font-weight: bold !important;
    border-radius: 15rpx !important;
  }
  
  .control-section {
    padding: 40rpx !important;
    margin-bottom: 30rpx !important;
    border-radius: 20rpx !important;
  }
  
  .button-group {
    gap: 20rpx !important;
  }
  
  .action-buttons {
    gap: 30rpx !important;
    margin-top: 40rpx !important;
  }
}

/* H8-101横屏模式优化 */
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
  .container {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 100rpx !important;
    min-height: 100vh !important;
  }
  
  .canvas-container {
    margin-bottom: 0 !important;
    margin-right: 80rpx !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .controls-container {
    max-width: 750rpx !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }
  
  .controls {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    gap: 25rpx !important;
  }
  
  .control-section {
    margin-bottom: 25rpx !important;
    padding: 45rpx !important;
    border-radius: 25rpx !important;
  }
  
  .action-buttons {
    margin-top: 30rpx !important;
    justify-content: flex-start !important;
    gap: 35rpx !important;
  }
  
  .sector-button {
    min-width: 160rpx !important;
    min-height: 110rpx !important;
    font-size: 38rpx !important;
    font-weight: bold !important;
  }
  
  .action-button {
    min-width: 200rpx !important;
    min-height: 120rpx !important;
    font-size: 42rpx !important;
    font-weight: bold !important;
  }
  
  .button-group {
    gap: 25rpx !important;
    justify-content: flex-start !important;
  }
}

/* 超宽屏横屏模式优化 */
@media screen and (orientation: landscape) and (min-width: 1366px) {
  .container {
    padding: 120rpx !important;
  }
  
  .canvas-container {
    margin-right: 100rpx !important;
  }
  
  .controls-container {
    max-width: 850rpx !important;
  }
  
  .section-title {
    font-size: 52rpx !important;
  }
  
  .sector-button {
    min-width: 180rpx !important;
    min-height: 120rpx !important;
    font-size: 42rpx !important;
  }
  
  .action-button {
    min-width: 240rpx !important;
    min-height: 140rpx !important;
    font-size: 46rpx !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .container {
    background-color: #000 !important;
  }
  
  .control-section {
    background: #fff !important;
    border: 4rpx solid #000 !important;
  }
  
  .section-title {
    color: #000 !important;
  }
  
  .circle-canvas {
    border: 6rpx solid #000 !important;
  }
  
  .sector-button,
  .action-button {
    border: 3rpx solid #000 !important;
  }
}

/* 触摸优化 */
.sector-button,
.action-button,
.lang-button,
.setting-button {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.2s ease !important;
}

.sector-button:active,
.action-button:active,
.lang-button:active,
.setting-button:active {
  transform: scale(0.95) !important;
}

/* 车载环境优化 */
@media screen and (min-width: 1200px) {
  .container {
    padding: 100rpx !important;
  }
  
  .section-title {
    font-size: 48rpx !important;
  }
  
  .sector-button {
    min-width: 180rpx !important;
    min-height: 110rpx !important;
    font-size: 40rpx !important;
  }
  
  .action-button {
    min-width: 220rpx !important;
    min-height: 120rpx !important;
    font-size: 44rpx !important;
  }
}

/* 横屏模式下的按钮组优化 */
@media screen and (orientation: landscape) {
  .button-group {
    gap: 20rpx !important;
    justify-content: flex-start !important;
  }
  
  .action-buttons {
    gap: 30rpx !important;
  }
  
  /* 横屏时控制区域垂直分布 */
  .controls {
    gap: 20rpx !important;
  }
  
  .control-section {
    margin-bottom: 20rpx !important;
  }
}

/* H8-101专用弹窗优化 */
@media screen and (orientation: landscape) {
  .lang-popup,
  .setting-popup {
    min-width: 700rpx !important;
    padding: 80rpx !important;
    border-radius: 25rpx !important;
  }
  
  .lang-buttons {
    gap: 30rpx !important;
  }
  
  .setting-buttons {
    gap: 35rpx !important;
  }
}

/* H8-101字体优化 */
@media screen and (min-width: 1024px) {
  .section-title,
  .popup-title {
    font-size: 48rpx !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }
}

@media screen and (orientation: landscape) {
  .section-title {
    font-size: 44rpx !important;
    margin-bottom: 30rpx !important;
  }
  
  .sector-button {
    font-size: 36rpx !important;
  }
  
  .action-button {
    font-size: 40rpx !important;
  }
}

/* 车载平板专用阴影和边框 */
@media screen and (min-width: 1024px) {
  .control-section {
    box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.15) !important;
    border: 3rpx solid #e0e0e0 !important;
  }
  
  .circle-canvas {
    box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.2) !important;
    border: 5rpx solid #333 !important;
  }
  
  .sector-button,
  .action-button {
    box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.1) !important;
  }
}

/* H8-101响应式间距优化 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .container {
    gap: 60rpx !important;
  }
  
  .controls-container {
    gap: 40rpx !important;
  }
  
  .control-section {
    gap: 25rpx !important;
  }
}

/* 车载环境下的高对比度按钮 */
@media screen and (min-width: 1024px) {
  .sector-button {
    border: 2rpx solid #333 !important;
  }
  
  .action-button {
    border: 3rpx solid #333 !important;
  }
  
  .sector-button:active,
  .action-button:active {
    background-color: #f0f0f0 !important;
    transform: scale(0.98) !important;
  }
}

/* H8-101横屏模式下的特殊优化 */
@media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
  /* 确保画布在左侧，控制区域在右侧 */
  .canvas-container {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  
  .controls-container {
    order: 2 !important;
    flex: 1 !important;
    max-width: none !important;
  }
  
  /* 优化控制区域的垂直分布 */
  .controls {
    height: auto !important;
    min-height: 600rpx !important;
  }
  
  /* 确保按钮组在横屏时合理分布 */
  .button-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20rpx !important;
  }
  
  /* 操作按钮在底部 */
  .action-buttons {
    margin-top: auto !important;
    padding-top: 30rpx !important;
  }
}

/* 车载平板专用动画效果 */
@media screen and (min-width: 1024px) {
  .sector-button,
  .action-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .sector-button:hover,
  .action-button:hover {
    transform: translateY(-2rpx) !important;
    box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.15) !important;
  }
}

/* H8-101专用字体渲染优化 */
@media screen and (min-width: 1024px) {
  .section-title,
  .sector-button,
  .action-button,
  .popup-title {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }
}