@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");

body {
  font-family: "Lato", sans-serif;
  //background: url("game-assets/images/bg.png"); /* 添加这里的背景图片设置 */
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #f1e5c9;
  padding-left: 0;
  transition: padding-left 0.3s ease-in-out;
}

body.nav-open {
  padding-left: 200px;
}

.game-container {
  background: url("images/wood-texture.jpg");
  border: 8px solid #8b4513;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-width: 1000px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 0;
  transition: margin-left 0.3s ease-in-out;
}

.nav-open .game-container {
  margin-left: 200px;
}

.game-header {
  text-align: center;
  margin-bottom: 20px;
}

h1,
h3 {
  color: #2c1e0f; /* 深棕色 */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 白色阴影 */
}

.game-content {
  display: flex;
  gap: 20px;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%; /* 确保左侧面板占满分配的空间 */
}

#medals-area,
#compost-tip-area {
  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border: 2px solid #4a3520; /* 深棕色边框 */
  border-radius: 10px;
  padding: 10px;
  width: 100%; /* 确保两个区域宽度相同 */
  box-sizing: border-box; /* 确保padding不会增加元素的总宽度 */
}

#compost-tip-area {
  text-align: left;
}

#compost-tip-area h3 {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: left;
}

#compost-tip {
  color: #2c1e0f; /* 深棕色文字 */
  font-style: italic;
}

.right-panel {
  flex: 1;
}

.main-area {
  flex: 2;
  background-color: rgba(255, 255, 255, 0.8); /* 添加半透明白色背景 */
  padding: 20px;
  border-radius: 10px;
}

.debug-area,
.compost-result,
#compost-tip-area {
  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border: 2px solid #4a3520; /* 深棕色边框 */
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
  color: #2c1e0f; /* 深棕色文字 */
}

#debug-toggle {
  cursor: pointer;
  user-select: none;
  color: #ffd700; /* 金色标题 */
  margin-bottom: 10px;
}

#debug-toggle::after {
  content: "▼";
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.debug-area:not(.collapsed) #debug-toggle::after {
  transform: rotate(180deg);
}

#debug-content {
  transition: opacity 0.3s ease-out;
}

.debug-area.collapsed #debug-content {
  opacity: 0;
}

.game-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  background: url("images/stone-texture.jpg");
  border: 2px solid #4a3520; /* 深棕色边框 */
  border-radius: 20px;
  padding: 5px 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #2c1e0f; /* 深棕色文字 */
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6); /* 轻微的白色阴影 */
}

.info-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  object-fit: contain; /* 这将确保整个图标可见，可能会留有空白 */
}

#gameCanvas {
  border: 4px solid #8b4513;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9); /* 添加更不透明的白色背景 */
}

.coc-button {
  background: linear-gradient(to bottom, #ffd700, #ff8c00);
  border: 2px solid #8b4513;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.coc-button:hover {
  background: linear-gradient(to bottom, #ff8c00, #ffd700);
}

.coc-button:disabled {
  background: #888;
  cursor: not-allowed;
}

#medals-display {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.score-area,
.level-area,
.lives-area {
  font-size: 18px;
}

/* 其他样式保持不变 */

.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffd700;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.notification.show {
  opacity: 1;
}

/* 添加环境影响区域的样式 */
.environmental-impact {
  background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  border: 2px solid #4a3520; /* 深棕色边框 */
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  color: #2c1e0f; /* 深棕色文字 */
}

.environmental-impact h3 {
  color: #2c1e0f; /* 深棕色 */
  margin-bottom: 10px;
}

.environmental-impact div {
  margin: 5px 0;
  font-size: 14px;
}

.environmental-impact span {
  font-weight: bold;
  color: #4a3520; /* 深棕色 */
}

/* 在文件末尾添加以下样式 */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1e5c9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 80%;
}

.popup-content h2 {
  color: #8b4513;
  margin-bottom: 10px;
}

.popup-content p {
  color: #4a4a4a;
  margin-bottom: 20px;
}

#popup-close {
  margin-top: 20px;
}

/* 在文件末尾添加以下样式 */
.share-buttons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.share-button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.share-button.facebook {
  background-color: #3b5998;
}

.share-button.twitter {
  background-color: #1da1f2;
}

.share-button.linkedin {
  background-color: #0077b5;
}

.share-button.reddit {
  background-color: #ff4500;
}

.share-button.pinterest {
  background-color: #bd081c;
}

.share-button:hover {
  opacity: 0.8;
}

.audio-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#toggleMusic,
#musicSelect {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

#musicSelect {
  background-color: #008cba;
}

/* 添加到现有的CSS文件末尾 */

.main-nav {
  position: fixed;
  left: -200px; /* 初始态隐藏 */
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #f1e5c9;
  overflow-y: auto;
  padding: 50px 0 20px; /* 增加顶部内边距，为菜单按钮留出空间 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease-in-out;
  z-index: 1001;
}

.main-nav.collapsed {
  left: -200px;
}

.nav-open .main-nav {
  left: 0;
}

.main-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.main-nav > ul > li {
  margin-bottom: 10px;
}

.main-nav > ul > li > a {
  display: block;
  padding: 10px 20px;
  color: #4a3520;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.main-nav > ul > li > a:hover {
  background-color: #e6d8b8;
}

.main-nav ul ul {
  display: none;
  padding-left: 20px;
}

.main-nav ul ul li a {
  display: block;
  padding: 5px 10px;
  color: #4a3520;
  text-decoration: none;
  font-size: 0.9em;
  transition: background-color 0.3s;
}

.main-nav ul ul li a:hover {
  background-color: #e6d8b8;
}

/* 调整游戏容器的位置以适应新的导航栏 */
.game-container {
  margin-left: 0;
}

.nav-toggle {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 1002; /* 确保它在导航栏之上 */
  background-color: #4a3520;
  color: #f1e5c9;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: left 0.3s ease-in-out;
}

/* 添加新的样式 */
.nav-open .nav-toggle {
  left: 210px; /* 导航栏宽度 + 一些间距 */
}

/* ... 其他样式保持不变 ... */

@media (max-width: 768px) {
  body {
    padding: 0;
    margin: 0;
  }

  .game-container {
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }

  .game-header {
    padding: 10px 0;
  }

  .game-header h1 {
    font-size: 24px;
    margin: 0;
  }

  .main-area {
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #gameCanvas {
    max-width: 100%;
    max-height: calc(100vh - 150px);
  }

  .game-info {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 5px;
    display: flex;
    justify-content: space-around;
  }

  .info-item {
    font-size: 14px;
    padding: 5px 10px;
  }

  .game-controls {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .coc-button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 0 5px;
  }

  .left-panel,
  .right-panel,
  .debug-area {
    display: none;
  }

  .nav-toggle {
    display: none;
  }

  .audio-controls {
    position: fixed;
    top: 10px;
    right: 10px;
  }

  #toggleMusic {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* 在文件末尾添加以下样式 */

@media (min-width: 768px) and (max-width: 1024px) {
  .game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .main-area {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #gameCanvas {
    width: 100%;
    height: auto;
    max-height: 70vh;
  }

  .game-info {
    width: 100%;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .game-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .coc-button {
    padding: 15px 30px;
    font-size: 18px;
  }

  .audio-controls {
    position: static;
    margin-top: 10px;
  }
}

/* 修改移动设备的样式 */
@media (max-width: 767px) {
  .game-controls {
    position: static;
    margin-top: 10px;
    transform: none;
  }
}

/* 针对 iPad mini 和其他中等尺寸平板设备的优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .game-container {
    padding: 10px;
  }

  .main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #gameCanvas {
    width: 100%;
    height: auto;
    max-height: 70vh;
  }

  .game-info {
    width: 100%;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .game-controls {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: static;
    transform: none;
  }

  .coc-button {
    padding: 12px 24px;
    font-size: 16px;
    margin: 0 5px;
  }

  .audio-controls {
    position: static;
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  #toggleMusic {
    padding: 8px 16px;
    font-size: 14px;
  }

  /* 调整左右面板在平板上的显示 */
  .left-panel,
  .right-panel {
    width: 100%;
    margin-top: 10px;
  }

  #medals-area,
  #compost-tip-area,
  .compost-result,
  .environmental-impact {
    margin-bottom: 10px;
  }
}

/* 针对较小的平板设备和大屏手机的额外优化 */
@media (min-width: 600px) and (max-width: 767px) {
  .game-container {
    padding: 5px;
  }

  .coc-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .game-info {
    flex-wrap: wrap;
  }

  .info-item {
    margin: 5px;
    font-size: 12px;
  }

  #toggleMusic {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.game-rules {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a3520;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  color: #2c1e0f;
}

.game-rules h3 {
  color: #2c1e0f;
  margin-bottom: 10px;
}

#game-rules-info {
  font-size: 14px;
  font-weight: bold;
}

.coupon-progress {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a3520;
  border-radius: 10px;
  padding: 10px;
  color: #2c1e0f;
  margin-bottom: 10px;
}

.coupon-progress h3 {
  color: #2c1e0f;
  margin-bottom: 5px;
  font-size: 16px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-fill {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  transition: width 0.3s ease-in-out;
}

.progress-text {
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
}

#coupon-award {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}

#purchase-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
}

/* 针对移动设备的响应式设计 */
@media (max-width: 768px) {
  .coupon-progress {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 1000;
    font-size: 12px;
    padding: 5px;
  }

  .coupon-progress h3 {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .progress-bar {
    height: 15px;
  }

  .progress-text,
  #coupon-award,
  #purchase-link {
    font-size: 12px;
  }

  #gameCanvas {
    margin-top: 60px; /* 为优惠券进度条留出空间 */
  }
}

/* 如果左侧面板现在为空，可以考虑调整布局 */
.left-panel {
  display: none; /* 或者根据需要调整其他样式 */
}

.game-content {
  justify-content: center; /* 将游戏内容居中 */
}

.main-area {
  flex: 3; /* 增加主区域的比例 */
}

.right-panel {
  flex: 1; /* 保持右侧面板的比例 */
}

/* 修改左侧面板的样式 */
.left-panel {
  display: flex; /* 改回 flex 显示 */
  flex-direction: column;
  gap: 20px;
  width: 100%;
  flex: 1; /* 保持与右侧面板相同的比例 */
}

/* 调整游戏内容的布局 */
.game-content {
  justify-content: space-between; /* 在左中右三个部分之间平均分配空间 */
}

.main-area {
  flex: 2; /* 保持主区域的比例 */
}

.right-panel {
  flex: 1; /* 保持右侧面板的比例 */
}

/* 优惠券进度框的样式（可以保持不变，或根据需要微调） */
.coupon-progress {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #4a3520;
  border-radius: 10px;
  padding: 10px;
  color: #2c1e0f;
}

.coupon-progress h3 {
  color: #2c1e0f;
  margin-bottom: 10px;
}

#coupon-info {
  font-size: 14px;
  font-weight: bold;
}

/* 针对移动设备的响应式设计 */
@media (max-width: 768px) {
  .left-panel {
    display: none; /* 在小屏幕上隐藏左侧面板 */
  }

  .game-content {
    flex-direction: column;
  }

  .main-area {
    order: 1; /* 确保主游戏区域在最上方 */
  }

  .right-panel {
    order: 2;
    margin-top: 20px;
  }

  /* 在小屏幕上显示优惠券进度 */
  .coupon-progress {
    display: block;
    margin-top: 20px;
  }
}

.game-rules ul {
  list-style-type: none;
  padding-left: 0;
}

.game-rules li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.game-rules li::before {
  content: "🍃";
  position: absolute;
  left: 0;
  top: 0;
}

.coupon-code {
  font-weight: bold;
  color: #ff6600;
  background-color: #ffe6cc;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #ff6600;
  display: inline-block;
  margin-top: 5px;
}

#coupon-award {
  margin-top: 10px;
  font-weight: bold;
  color: #4a3520;
  text-align: center;
}

.product-image {
  position: absolute;
  top: 47.25%;
  left: 49.25%;
  transform: translate(-50%, -50%);
  z-index: 10;
  max-width: 60%; /* 从 80% 减小到 60% */
  max-height: 60%; /* 从 80% 减小到 60% */
  width: 440px; /* 添加固定宽度 */
  height: auto; /* 高度自动调整以保持宽高比 */
  display: none;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%; /* 确保图片填满容器 */
  height: 100%; /* 确保图片填满容器 */
}
.game-slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Creepster", cursive;
  font-size: 32px; /* 宽度稍微缩小10% */
  color: #ff6600; /* 明亮的橙色 */
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
    -2px 2px 0 #000, 0 0 8px #ff6600; /* 橙色光晕效果 */
  background-color: rgba(0, 0, 0, 0.7); /* 深色半透明背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.5); /* 橙色阴影 */
  z-index: 10;
  transition: opacity 0.5s ease-in-out;
  border: 2px solid #ff6600; /* 橙色边框 */
}

.game-slogan p {
  margin: 10px 0;
}

.game-slogan p:first-child {
  font-size: 48px;
  margin-bottom: 20px;
}

.game-notification {
  position: fixed;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: top 0.3s ease-in-out;
  z-index: 2000;
}

.game-notification.show {
  top: 20px;
}

@media (max-width: 768px) {
  #coupon-info {
    font-size: 14px;
  }
}

/* 在文件末尾添加或修改以下样式 */

@media (max-width: 767px) {
  .game-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
  }

  .game-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  #gameCanvas {
    max-height: 60vh;
    width: auto;
    height: auto;
  }

  .coupon-progress {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 10px;
  }

  .game-controls {
    position: static;
    margin-top: 10px;
    transform: none;
  }

  .coc-button {
    padding: 8px 16px;
    font-size: 14px;
  }

  .audio-controls {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #toggleMusic {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* 移除之前为优惠券进度条留出的空间 */
  #gameCanvas {
    margin-top: 0;
  }
}

/* 针对较小的平板设备和大屏手机的额外优化 */
@media (min-width: 600px) and (max-width: 767px) {
  #gameCanvas {
    max-height: 70vh;
  }

  .coc-button {
    padding: 10px 20px;
    font-size: 16px;
  }
}