/* CSS 变量 */
:root {
    --primary-color: #375b80;
    --secondary-color: #34495e;
    --accent-color: #3498db;
    --background-color: #2c3e50;
    --panel-bg: rgba(255, 255, 255, 0.05);
    --text-color: #ecf0f1;
    --border-color: #7f8c8d;
    --header-height: 60px;
    --sidebar-width: 250px;
    --min-game-width: 320px;
    --block-size: 30px; /* 默认方块大小（大屏幕） */
    --ghost-opacity: 0.15; /* 模拟方块透明度 */
    --button-hover: #2980b9;
    --modal-bg: rgba(0, 0, 0, 0.8);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    height: 100%;
    width: 100%;
    position: fixed;
    min-width: 1100px;
  }
  
  body {
    font-family: "Arial", sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%; /* 防止iOS自动调整字体大小 */
  }
  
  .base-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 20px;
    overflow: auto;
    align-items: center;
    /* 设置滚动条样式 */
    scrollbar-color: #7c7a7a transparent; /* Firefox */
    scrollbar-width: thin; /* Firefox */
    /* Webkit浏览器 */
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: #7c7a7a;
      border-radius: 4px;
    }
    /* IE浏览器 */
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  
  .base-content {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 元素间隔 */
    align-items: center;
    justify-content: center;
  }
  
  /* 游戏包装器 */
  .game-wrapper {
    flex: 1;
    flex-direction: column;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    overflow: auto;
    /* 设置滚动条样式 */
    scrollbar-color: #7c7a7a transparent; /* Firefox */
    scrollbar-width: thin; /* Firefox */
    /* Webkit浏览器 */
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: #7c7a7a;
      border-radius: 4px;
    }
    /* IE浏览器 */
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  
  /* 游戏头部 */
  .game-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: var(--header-height);
    margin-bottom: 20px;
  }
  
  .game-header h1 {
    font-size: 2em;
    font-weight: bold;
    color: var(--text-color);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  
  .game-settings {
    display: flex;
    gap: 10px;
  }
  
  .review-content {
    margin-top: 20px;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background: #203040;
  }
  
  /* 图标按钮 */
  .icon-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .icon-btn:hover {
    background: var(--panel-bg);
  }
  
  /* 游戏容器 */
  .game-container {
    /* flex: 1; */
    display: flex;
    gap: 20px;
    min-height: 0;
    position: relative;
    /* 设置子元素水平和垂直居中 */
    justify-content: center;
  }
  
  /* 侧边栏 */
  .game-sidebar {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .sidebar-content {
    /* display: flex; */
    flex-direction: column;
    gap: 20px;
    height: 100%;
  }
  
  /* 面板样式 */
  .panel {
    background: var(--panel-bg);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .panel h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--text-color);
    text-align: center;
  }
  
  /* 分数面板 */
  .score-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  
  .score-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
  }
  
  .score-item h3 {
    font-size: 0.9em;
    margin-bottom: 5px;
  }
  
  .score-item .value {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--accent-color);
  }
  
  /* 游戏主区域 */
  .game-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--min-game-width);
    max-width: 100%;
    height: 100%;
  }
  
  .canvas-wrapper {
    flex: 1;
    width: 100%;
    /* height: 100%; */
    min-height: 0;
  }
  
  /* 画布容器 */
  .canvas-container {
    display: flex;
    justify-content: center;
    background: var(--panel-bg);
    border-radius: 10px;
    padding: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    min-height: 0; /* 防止 flex 子元素溢出 */
  }
  
  canvas#gameCanvas {
    /* 使用方块大小计算画布宽度 */
    --canvas-width: calc(var(--block-size) * 10); /* 10 是游戏列数 */
  
    /* 基础样式 */
    width: var(--canvas-width);
    height: calc(var(--canvas-width) * 2); /* 高度是宽度的两倍 */
    max-width: 100%;
    max-height: 100%;
    display: block; /* 移除画布底部的额外空间 */
    border-radius: 10px;
  }
  
  /* 预览和暂存区 */
  .preview-container,
  .hold-container {
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
  }
  
  /* 控制说明 */
  .controls-list {
    display: grid;
    gap: 8px;
  }
  
  .control-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .control-item .key {
    background: var(--primary-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
  }
  
  /* 按钮样式 */
  .game-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s;
    background: var(--panel-bg);
    color: var(--text-color);
  }
  
  .btn:hover {
    background: var(--button-hover);
  }
  
  .btn.primary {
    background: var(--primary-color);
  }
  
  .btn.primary:hover {
    background: var(--button-hover);
  }
  
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* 模态框 */
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
  }
  
  .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-color);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    min-width: 300px;
  }
  
  .modal-content h2 {
    margin-bottom: 20px;
  }
  
  .btn.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
  }
  
  .btn.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .btn.icon-btn.disabled {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: default;
  }
  
  .btn.icon-btn .material-icons {
    font-size: 24px;
    transition: opacity 0.2s ease;
  }
  
  /* 小图标按钮样式 */
  .btn.icon-btn.small-icon {
    width: 35px;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .btn.icon-btn.small-icon:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .btn.icon-btn.small-icon.disabled {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  @media (max-width: 1024px) {
    .sidebar-content {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
  
    .panel {
      flex: 1;
      min-width: 200px;
    }
  
    :root {
      --sidebar-width: 220px;
      --block-size: 30px; /* 中等屏幕方块大小 */
    }
  
    .game-wrapper {
      padding: 10px;
    }
  }
  
  @media (max-width: 768px) {
    .panel {
      min-width: 150px;
    }
  
    .score-grid {
      display: grid;
      width: 50px;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
    }
  
    .preview-container,
    .hold-container {
      padding: 5px; /* 减小预览区域的内边距 */
    }
  
    .score-item {
      border-radius: 5px;
      padding: 5px;
    }
  
    .score-item h3 {
      font-size: 0.7em; /* 减小标题字体大小 */
    }
  
    .score-item .value {
      font-size: 1em; /* 减小分数字体大小 */
    }
  }
  
  /* 移动端优化CSS修改
  
  为了让游戏在移动设备上有更好的体验，我们需要对CSS进行一些调整。以下是针对移动端的优化方案：
  /* 添加移动端样式 */
  @media screen and (max-width: 480px) {
    /* 基础布局调整 */
    body {
      overflow: hidden;
      touch-action: none;
    }
  
    /* 游戏容器调整 */
    .game-container {
      height: 100%;
      flex-direction: column;
      padding: 160px 0 30px 0;

    }
  
    /* 侧边栏调整 */
    .game-sidebar {
      margin: 10px 0;
    }
  
    /* 主画布区域 */
    .game-main {
      order: 1;
      width: 100%;
      margin: 0;
    }
  
    /* 画布尺寸调整 */
    .canvas-container {
      width: 100%;
      height: auto;
      aspect-ratio: 1/2;
    }
  
    /* 信息面板调整 */
    .panel {
      padding: 10px;
      margin: 5px 0;
    }
  
    /* 分数显示调整 */
    .score-grid {
      display: flex;
      height: 82px;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: auto;
      gap: 15px;
    }
  
    /* 按钮样式调整 */
    .btn {
      padding: 8px 16px;
      font-size: 14px;
    }

    .score-item {
      background: none;
      padding: 0;
      width: auto;
    }
  
    /* 预览区域调整 */
    .preview-container {
      width: 100px;
      height: 100px;
      margin: 0 auto;
    }
  
    /* 控制说明调整 */
    .controls-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
  
    .control-item {
      padding: 5px;
      font-size: 12px;
    }
  
    /* 游戏结束弹窗 */
    .modal-content {
      width: 90%;
      max-width: 300px;
      padding: 15px;
    }
  
    /* AI控制按钮 */
    .ai-controls {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }
  
    .demo-btn {
      padding: 10px 20px;
      font-size: 14px;
    }
  }
  
  /* 添加触摸反馈 */
  .btn:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }
  
  /* 防止长按菜单 */
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  @media (max-width: 360px) {
    :root {
      --block-size: 20px;
    }
  }
  
  /* 覆盖层样式 */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: white;
    text-align: center;
  }
  
  .overlay-content {
    background-color: var(--block-color-i);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    max-width: 80%;
  }
  
  .overlay-content h2 {
    margin-top: 0;
    color: white;
    font-size: 1.8rem;
  }
  
  .overlay-content p {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
  }
  
  /* 游戏区域相对定位，用于覆盖层定位 */
  .game-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 游戏控制按钮区域 */
  .game-controls {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }
  
  /* 积分动画 */
  .score-animation {
    position: absolute;
    color: #ffeb3b;
    font-size: 2.2rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(231, 204, 5, 0.8);
    z-index: 100;
    pointer-events: none;
    animation: score-float 1.5s ease-out forwards;
    opacity: 1; /* 初始状态设为可见，动画会控制透明度 */
    transform-origin: center;
    text-align: center; /* 确保文本居中 */
    white-space: nowrap; /* 防止文本换行 */
  }
  
  @keyframes score-float {
    0% {
      transform: translateY(0) scale(0.8) rotate(-5deg);
      opacity: 0; /* 动画开始时不可见 */
    }
    10% {
      transform: translateY(-10px) scale(1.2) rotate(0deg);
      opacity: 1;
    }
    20% {
      transform: translateY(-20px) scale(1.1) rotate(5deg);
    }
    50% {
      transform: translateY(-40px) scale(1) rotate(-2deg);
      opacity: 1;
    }
    80% {
      opacity: 0.8;
    }
    100% {
      transform: translateY(-80px) scale(0.9) rotate(0deg);
      opacity: 0;
    }
  }
  
  /* 分数滚动效果 */
  .score-roll {
    position: relative;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5em;
  }
  
  .score-roll-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: score-roll-animation 0.5s ease-out;
  }
  
  .score-roll-old {
    animation: score-roll-out 0.5s ease-out;
  }
  
  @keyframes score-roll-animation {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes score-roll-out {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  .demo-btn {
    top: 20px;
    padding: 10px 20px;
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.demo-btn:hover {
    background: #66b1ff;
}

/* AI控制区域 */
.ai-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}


/* 加速按钮样式 */
.speed-btn {
  position: absolute;
  top: 20px;
  left: 120px; /* 位于自动演示按钮右侧 */
  padding: 10px 20px;
  background: #FF9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.speed-btn:hover {
  background: #F57C00;
}

.speed-btn.active {
  background: #E65100;
}

@media screen and (max-width: 480px) {
  .base-wrapper {
    padding: 10px;
  }
  .game-sidebar {
    margin: 0;
  }

  .game-header {
    margin-bottom: 100px;
    position: fixed;
    top: 0;
    z-index: 10;
  }

  .demo-btn {
    position: absolute;
  }
  
  /* 移除controls区域 */
  .controls-panel {
    display: none;
  }

  /* 左侧信息框折叠样式 */
  .game-sidebar.left {
    position: fixed;
    top: 60px;
    left: 20px;
    width: 50%;
    z-index: 1000;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
  }

  .game-sidebar.left.collapsed {
    width: 50px;
    height: 50px;
  }

  .game-sidebar.left.collapsed .panel {
    display: none;
  }

  /* Next Block区域调整 */
  .preview-panel {
    position: fixed;
    top: 60px;
    right: 10px;
    width: 80px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    font-size: 0.8em;
    margin-bottom: 5px;
  }

  .preview-container {
    width: 100%;
    height: 70%;
  }

  /* 调整AI控制按钮位置 */
  .ai-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    flex-direction: row;
    gap: 10px;
  }

  .score-item .value {
    font-size: 1em;
  }
  
  
    /* 游戏控制按钮 */
    .game-controls {
      display: none;
    }

    .canvas-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .demo-btn {
      position: relative;
      top: 0;
    }

    .base-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column; 
    }
}

@media screen and (max-width: 480px) {
  /* 锁定竖屏 */
  html, body {
    transform: rotate(0deg);
    transform-origin: center center;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
  }

  /* 防止横屏时内容显示异常 */
  @media (orientation: landscape) {
    body::before {
      content: "请将设备旋转至竖屏以继续游戏";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5em;
      color: var(--text-color);
      z-index: 9999;
      text-align: center;
      padding: 20px;
    }
  }
}


/* Hold Block 面板样式 */
.hold-panel {
  margin-top: 20px;
  background: rgb(55 72 89);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.hold-panel h3 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.2em;
}

.hold-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#holdCanvas {
  display: block;
  margin: 0 auto;
}

/* 连击文本动画样式 */
.combo-text {
  position: absolute;
  color: #ffcc00;
  font-weight: bold;
  font-size: 24px;
  text-shadow: 0 0 10px #ff6600, 0 0 20px #ff9900;
  z-index: 1000;
  opacity: 0;
  transition: all 0.5s ease-out;
  transform: scale(0.5);
  text-align: center;
  pointer-events: none;
  font-family: 'Arial', sans-serif;
  letter-spacing: 1px;
}

/* 漂浮分数动画样式 */
.floating-score {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  transition: all 0.4s ease-out;
  transform: scale(0.8);
  text-align: center;
  pointer-events: none;
  font-family: 'Arial', sans-serif;
}