/* 重置和基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -ms-touch-action: none;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 默认移动端背景 */
}

@media (min-width: 1024px) {
  html {
    background-color: #333; /* PC端背景 */
  }
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* 移动端白色背景 */
  overflow: hidden;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  
  /* 防止选择和高亮 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* PC端深色背景 */
@media (min-width: 1024px) {
  body {
    background-color: #333;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: antialiased;
  }
}

/* Splash 屏幕 - 关键修复 */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #e4efff; /* 默认背景色 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 移动端强制显示splash */
@media (max-width: 1023px) {
  #splash {
    opacity: 1 !important;
    visibility: visible !important;
    background: #e4efff url(./splash.12675.png) no-repeat center !important;
    background-size: 100% 100% !important;
  }
  
  #splash::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    max-width: 50vw;
    max-height: 50vh;
    background: url(./logo.49306.png) no-repeat center;
    background-size: contain;
  }
  
  #splash::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  /* 隐藏splash内的其他元素 */
  #splash > * {
    display: none !important;
  }
}

/* 游戏容器 */
#Cocos2dGameContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
}

canvas {
  background-color: transparent !important;
  display: block;
}

/* 动画 */
@keyframes spin {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

/* 移除输入框 spinner */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 隐藏所有进度条 */
.progress-bar {
  display: none !important;
}

/* ============================================
   禁止横屏相关样式（仅移动端）
   ============================================ */

/* 横屏时强制旋转页面回竖屏（仅移动端） */
@media screen and (orientation: landscape) and (max-width: 1023px) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* 横屏提示遮罩（仅移动端） */
#orientationTip {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#orientationTip .icon {
  font-size: 50px;
  margin-bottom: 20px;
  animation: rotate-icon 2s ease-in-out infinite;
}

#orientationTip .text-primary {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

#orientationTip .text-secondary {
  font-size: 16px;
  opacity: 0.8;
}

@keyframes rotate-icon {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* 横屏时显示提示（仅移动端） */
@media screen and (orientation: landscape) and (max-width: 1023px) {
  #orientationTip {
    display: flex !important;
  }
}