/* ===== 全局样式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 通用隐藏类：所有元素都可使用 */
.hidden {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  background: #0a1f28;
  color: #e8f0f0;
}

/* 全屏模式安全区域适配 */
:fullscreen body,
:-webkit-full-screen body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#hud-top {
  padding-top: max(8px, env(safe-area-inset-top));
}

#hud-bottom {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* ===== 游戏画布 ===== */
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

/* ===== 屏幕覆盖层 ===== */
.screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #08282D 0%, #1A535C 50%, #0F3B42 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.screen-overlay.hidden {
  display: none;
}

.menu-container {
  text-align: center;
  padding: 40px;
  max-width: 500px;
  width: 90%;
}

.game-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.game-subtitle {
  font-size: 1.1rem;
  color: rgba(232, 240, 240, 0.7);
  margin-bottom: 40px;
  letter-spacing: 0.2em;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.btn {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid rgba(232, 240, 240, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #e8f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(232, 240, 240, 0.5);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, #2A9D8F, #1A535C);
  border-color: #2A9D8F;
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #32B8A8, #1F6B78);
}

.btn-danger {
  border-color: rgba(231, 111, 81, 0.5);
  color: #E76F51;
}

.btn-danger:hover {
  background: rgba(231, 111, 81, 0.15);
  border-color: #E76F51;
}

.menu-hint {
  font-size: 0.85rem;
  color: rgba(232, 240, 240, 0.5);
}

.btn-fullscreen {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(10, 31, 40, 0.7);
  border: 1px solid rgba(232, 240, 240, 0.2);
  border-radius: 8px;
  color: rgba(232, 240, 240, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
}

.btn-fullscreen:active {
  background: rgba(42, 157, 143, 0.4);
  border-color: #2A9D8F;
  transform: scale(0.92);
}

.btn-fullscreen:hover {
  background: rgba(42, 157, 143, 0.2);
  border-color: rgba(42, 157, 143, 0.5);
  color: #2A9D8F;
}

/* ===== 主菜单海洋装饰 ===== */
.menu-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

#mainMenu .menu-container {
  position: relative;
  z-index: 2;
}

/* --- 气泡 --- */
.bubbles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -50px;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(100, 200, 220, 0.3));
  border-radius: 50%;
  animation: bubbleRise var(--duration) ease-in var(--delay) infinite;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.4);
}

@keyframes bubbleRise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(-50vh) translateX(15px) scale(1.1);
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-110vh) translateX(-10px) scale(0.8);
    opacity: 0;
  }
}

/* --- 波浪 --- */
.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

.wave-1 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,100 400,20 600,60 C800,100 1000,20 1200,60 L1200,120 L0,120 Z' fill='rgba(42, 157, 143, 0.15)'/%3E%3C/svg%3E");
  background-size: 600px 100%;
  animation: waveMove 12s linear infinite;
  opacity: 0.6;
  bottom: 10px;
}

.wave-2 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C150,40 350,100 600,80 C850,60 1050,100 1200,80 L1200,120 L0,120 Z' fill='rgba(26, 83, 92, 0.3)'/%3E%3C/svg%3E");
  background-size: 600px 100%;
  animation: waveMove 20s linear infinite reverse;
  opacity: 0.5;
  bottom: 5px;
}

.wave-3 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C300,70 500,110 600,100 C700,90 900,110 1200,100 L1200,120 L0,120 Z' fill='rgba(8, 40, 45, 0.5)'/%3E%3C/svg%3E");
  background-size: 600px 100%;
  animation: waveMove 25s linear infinite;
  opacity: 0.7;
  bottom: 0;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- 鱼群 --- */
.fish-school {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.3;
  letter-spacing: 4px;
  animation: fishSwim 25s linear infinite;
}

.fish-school-1 {
  top: 25%;
  left: -10%;
  animation-duration: 30s;
}

.fish-school-2 {
  top: 40%;
  left: -15%;
  font-size: 1rem;
  animation-duration: 22s;
  animation-delay: -8s;
  opacity: 0.2;
}

@keyframes fishSwim {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(30vw) translateY(-10px);
  }
  50% {
    transform: translateX(60vw) translateY(5px);
  }
  75% {
    transform: translateX(90vw) translateY(-5px);
  }
  100% {
    transform: translateX(120vw) translateY(0);
  }
}

/* --- 海鸟 --- */
.seagull {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.4;
  animation: seagullFly 40s linear infinite;
}

.seagull-1 {
  top: 12%;
  left: -5%;
  animation-duration: 35s;
}

.seagull-2 {
  top: 8%;
  left: -10%;
  font-size: 1.2rem;
  animation-duration: 45s;
  animation-delay: -15s;
  opacity: 0.3;
}

@keyframes seagullFly {
  0% {
    transform: translateX(0) translateY(0) scaleX(1);
  }
  49% {
    transform: translateX(110vw) translateY(-15px) scaleX(1);
  }
  50% {
    transform: translateX(110vw) translateY(-15px) scaleX(-1);
  }
  99% {
    transform: translateX(-10vw) translateY(10px) scaleX(-1);
  }
  100% {
    transform: translateX(-10vw) translateY(10px) scaleX(1);
  }
}

/* --- 漂浮木筏装饰 --- */
.floating-raft {
  position: absolute;
  bottom: 12%;
  right: 8%;
  font-size: 3rem;
  animation: raftFloat 4s ease-in-out infinite;
  opacity: 0.5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@keyframes raftFloat {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

/* --- 左右漂浮装饰 --- */
.float-decor {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 60px 20px;
  pointer-events: none;
}

.float-decor-left {
  left: 0;
}

.float-decor-right {
  right: 0;
}

.decor-item {
  font-size: 2rem;
  opacity: 0.25;
  display: block;
  animation: decorFloat 6s ease-in-out infinite;
}

.decor-plank { animation-delay: 0s; }
.decor-barrel { animation-delay: -2s; font-size: 1.8rem; }
.decor-fish { animation-delay: -4s; font-size: 1.6rem; }
.decor-shell { animation-delay: -1s; font-size: 1.7rem; }
.decor-starfish { animation-delay: -3s; font-size: 1.5rem; }
.decor-bottle { animation-delay: -5s; font-size: 1.8rem; }

@keyframes decorFloat {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

/* --- 标题emoji行 --- */
.title-emoji-row {
  font-size: 2rem;
  margin-bottom: 10px;
  letter-spacing: 8px;
  animation: emojiBob 3s ease-in-out infinite;
}

@keyframes emojiBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* --- 标题发光和浮动 --- */
.game-title {
  animation: titleGlow 3s ease-in-out infinite alternate, titleFloat 4s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(42, 157, 143, 0.5),
    0 0 20px rgba(42, 157, 143, 0.3),
    0 0 40px rgba(42, 157, 143, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.5);
}

@keyframes titleGlow {
  from {
    text-shadow:
      0 0 10px rgba(42, 157, 143, 0.5),
      0 0 20px rgba(42, 157, 143, 0.3),
      0 0 40px rgba(42, 157, 143, 0.2),
      0 4px 20px rgba(0, 0, 0, 0.5);
  }
  to {
    text-shadow:
      0 0 15px rgba(42, 157, 143, 0.7),
      0 0 30px rgba(42, 157, 143, 0.5),
      0 0 60px rgba(42, 157, 143, 0.3),
      0 0 80px rgba(42, 157, 143, 0.15),
      0 4px 20px rgba(0, 0, 0, 0.5);
  }
}

@keyframes titleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* --- 副标题样式增强 --- */
.game-subtitle {
  animation: subtitleFadeIn 1.5s ease-out 0.3s both;
}

@keyframes subtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

/* --- 按钮浮动动画（交错延迟，仅主菜单） --- */
#mainMenu .menu-buttons .btn {
  animation: btnFloat 3s ease-in-out infinite;
}

#mainMenu .menu-buttons .btn:nth-child(1) { animation-delay: 0s; }
#mainMenu .menu-buttons .btn:nth-child(2) { animation-delay: -1s; }
#mainMenu .menu-buttons .btn:nth-child(3) { animation-delay: -2s; }

@keyframes btnFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

#mainMenu .menu-buttons .btn:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* --- 主按钮发光特效 --- */
.btn.btn-primary.btn-glow {
  position: relative;
  overflow: visible;
  font-size: 1.1rem;
  padding: 16px 36px;
}

.btn.btn-primary.btn-glow::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #2A9D8F, #48cae4, #2A9D8F, #90BE6D, #2A9D8F);
  background-size: 300% 300%;
  border-radius: 10px;
  z-index: -1;
  animation: btnGlowPulse 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s;
}

.btn.btn-primary.btn-glow:hover::before {
  opacity: 1;
}

@keyframes btnGlowPulse {
  0%, 100% {
    background-position: 0% 50%;
    filter: blur(8px);
  }
  50% {
    background-position: 100% 50%;
    filter: blur(12px);
  }
}

.btn.btn-primary.btn-glow:hover {
  box-shadow:
    0 0 20px rgba(42, 157, 143, 0.5),
    0 0 40px rgba(42, 157, 143, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.3);
}

/* --- 主菜单渐入动画 --- */
#mainMenu .menu-container {
  animation: menuFadeIn 1s ease-out 0.2s both;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-decorations > * {
  animation: decorFadeIn 1.5s ease-out 0.5s both;
}

@keyframes decorFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 帮助界面 ===== */
.help-content {
  text-align: left;
  margin-bottom: 24px;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-right: 10px;
}

.help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.15);
}

.help-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 240, 240, 0.15);
  color: rgba(232, 240, 240, 0.7);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  touch-action: manipulation;
  white-space: nowrap;
}

.help-tab.active {
  background: rgba(42, 157, 143, 0.25);
  border-color: rgba(42, 157, 143, 0.5);
  color: #2A9D8F;
}

.help-tab:hover, .help-tab:active {
  background: rgba(42, 157, 143, 0.15);
  color: #2A9D8F;
}

.help-tab-content {
  display: none;
}

.help-tab-content.active {
  display: block;
}

.help-container {
  max-width: 600px;
  width: 92%;
}

.help-content p {
  margin-bottom: 12px;
  line-height: 1.7;
}

.help-content ul {
  margin: 10px 0 16px 24px;
}

.help-content li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.help-content strong {
  color: #2A9D8F;
}

.menu-container h2 {
  font-size: 1.8rem;
  margin-bottom: 24px;
  color: #fff;
}

/* ===== 死亡界面 ===== */
.death-title {
  font-size: 3rem;
  color: #E76F51;
  text-shadow: 0 0 30px rgba(231, 111, 81, 0.5);
  margin-bottom: 16px;
}

.death-reason {
  font-size: 1.1rem;
  color: rgba(232, 240, 240, 0.8);
  margin-bottom: 8px;
}

.death-stats {
  font-size: 1rem;
  color: rgba(232, 240, 240, 0.6);
  margin-bottom: 30px;
}

/* ===== HUD ===== */
.hud {
  position: fixed;
  pointer-events: none;
  z-index: 50;
}

.hud.hidden {
  display: none;
}

.hud > * {
  pointer-events: auto;
}

/* 顶部HUD */
#hud-top {
  top: 16px;
  left: 0;
  right: 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hud-left, .hud-right {
  background: rgba(10, 31, 40, 0.7);
  backdrop-filter: blur(4px);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(232, 240, 240, 0.15);
}

.hud-day {
  font-weight: 600;
  font-size: 0.95rem;
  margin-right: 12px;
}

.hud-time {
  font-size: 0.9rem;
  color: rgba(232, 240, 240, 0.7);
}

.hud-weather {
  font-size: 0.9rem;
}

.hud-raft-health {
  margin-left: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* 生存状态条 */
.stat-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.stat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-icon {
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
}

.stat-track {
  width: 120px;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(232, 240, 240, 0.2);
}

.stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stat-fill.health {
  background: linear-gradient(90deg, #E76F51, #e74c3c);
}

.stat-fill.hunger {
  background: linear-gradient(90deg, #E9C46A, #F4A261);
}

.stat-fill.thirst {
  background: linear-gradient(90deg, #2A9D8F, #48cae4);
}

.stat-fill.stamina {
  background: linear-gradient(90deg, #2A9D8F, #90BE6D);
}

.stat-value {
  font-size: 0.75rem;
  color: rgba(232, 240, 240, 0.8);
  width: 28px;
  text-align: right;
  font-weight: 600;
}

/* 底部HUD */
#hud-bottom {
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.action-hint {
  background: rgba(10, 31, 40, 0.8);
  backdrop-filter: blur(4px);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(42, 157, 143, 0.4);
  color: rgba(232, 240, 240, 0.9);
  font-size: 0.85rem;
  pointer-events: none;
}

.action-hint.hidden {
  display: none;
}

.hotbar {
  display: flex;
  gap: 6px;
  background: rgba(10, 31, 40, 0.7);
  backdrop-filter: blur(4px);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(232, 240, 240, 0.15);
}

.hotbar-slot {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(232, 240, 240, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
}

.hotbar-slot:hover {
  border-color: rgba(232, 240, 240, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

.hotbar-slot.selected {
  border-color: #2A9D8F;
  background: rgba(42, 157, 143, 0.2);
  box-shadow: 0 0 10px rgba(42, 157, 143, 0.3);
}

.hotbar-slot .slot-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hotbar-slot .slot-key {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.65rem;
  color: rgba(232, 240, 240, 0.5);
  font-weight: 600;
}

.hotbar-slot .slot-lock {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 0.6rem;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
  pointer-events: none;
}

.hotbar-slot:has(.slot-lock[style*="display: block"]) {
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: inset 0 0 8px rgba(255, 193, 7, 0.15);
}

/* 触摸设备适配：增大触摸目标 */
@media (pointer: coarse) {
  .hotbar-slot {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
  }
  .hotbar-slot .slot-key {
    font-size: 0.7rem;
  }
  .hotbar-slot .slot-count {
    font-size: 0.8rem;
  }
  .inv-slot {
    font-size: 1.8rem;
  }
  .inv-slot .inv-count {
    font-size: 0.85rem;
  }
}

.hud-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 44px;
  height: 44px;
  background: rgba(10, 31, 40, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(232, 240, 240, 0.15);
  border-radius: 8px;
  color: #e8f0f0;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.action-btn:active {
  background: rgba(42, 157, 143, 0.4);
  border-color: #2A9D8F;
  transform: scale(0.92);
}

.action-btn:hover {
  background: rgba(42, 157, 143, 0.3);
  border-color: #2A9D8F;
}

/* ===== 面板 ===== */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: rgba(10, 31, 40, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 240, 240, 0.2);
  border-radius: 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.panel.hidden {
  display: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.15);
  flex-shrink: 0;
}

.panel-header h3 {
  font-size: 1.1rem;
  color: #fff;
  flex: 1;
}

.panel-btn {
  background: rgba(42, 157, 143, 0.2);
  border: 1px solid rgba(42, 157, 143, 0.4);
  color: #2A9D8F;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s;
  touch-action: manipulation;
  white-space: nowrap;
  margin-right: 8px;
}

.panel-btn:hover, .panel-btn:active {
  background: rgba(42, 157, 143, 0.4);
  color: #fff;
}

.panel-close {
  background: none;
  border: none;
  color: rgba(232, 240, 240, 0.6);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  touch-action: manipulation;
}

.panel-close:hover {
  background: rgba(231, 111, 81, 0.2);
  color: #E76F51;
}

.panel-body {
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

/* 物品栏网格 */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    touch-action: pan-y;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

.inv-slot {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(232, 240, 240, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  position: relative;
  touch-action: manipulation;
}

.inv-slot.has-item {
  border-color: rgba(232, 240, 240, 0.25);
}

.inv-slot .inv-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.inv-slot .inv-name {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.6rem;
  color: rgba(232, 240, 240, 0.5);
  font-weight: 600;
  writing-mode: vertical-rl;
}

/* 储物箱双栏布局 */
.storage-section {
  margin-bottom: 12px;
}

.storage-section:last-child {
  margin-bottom: 0;
}

.storage-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(232, 240, 240, 0.8);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.15);
}

.storage-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 240, 240, 0.2), transparent);
  margin: 12px 0;
}

/* 储物箱中可点击的物品 */
.inv-slot.clickable {
  cursor: pointer;
  transition: all 0.15s;
}

.inv-slot.clickable:hover {
  border-color: rgba(42, 157, 143, 0.6);
  background: rgba(42, 157, 143, 0.15);
  transform: scale(1.05);
}

.inv-slot.clickable:active {
  transform: scale(0.95);
}

/* 建造列表 */
.build-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  touch-action: pan-y;
}

.build-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 240, 240, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  touch-action: manipulation;
}

.build-item:hover {
  background: rgba(42, 157, 143, 0.15);
  border-color: rgba(42, 157, 143, 0.4);
}

.build-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.build-item.disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 240, 240, 0.1);
}

.build-icon {
  font-size: 2rem;
  width: 50px;
  text-align: center;
  flex-shrink: 0;
}

.build-info {
  flex: 1;
}

.build-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.build-cost {
  font-size: 0.8rem;
  color: rgba(232, 240, 240, 0.6);
}

.build-cost span {
  margin-right: 10px;
}

.build-cost .insufficient {
  color: #E76F51;
}

.build-cost .sufficient {
  color: #2A9D8F;
}

/* 合成面板 */
.craft-section {
  margin-bottom: 20px;
}

.craft-section:last-child {
  margin-bottom: 0;
}

.craft-section-title {
  font-size: 0.9rem;
  color: rgba(232, 240, 240, 0.7);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.1);
  font-weight: 600;
}

.craft-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: pan-y;
}

.craft-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 240, 240, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  touch-action: manipulation;
}

.craft-item:hover {
  background: rgba(42, 157, 143, 0.15);
  border-color: rgba(42, 157, 143, 0.4);
}

.craft-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.craft-item.disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(232, 240, 240, 0.1);
}

.craft-icon {
  font-size: 1.6rem;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.craft-info {
  flex: 1;
  min-width: 0;
}

.craft-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.craft-cost {
  font-size: 0.75rem;
  color: rgba(232, 240, 240, 0.6);
}

.craft-cost span {
  margin-right: 8px;
}

.craft-cost .insufficient {
  color: #E76F51;
}

.craft-cost .sufficient {
  color: #2A9D8F;
}

.craft-output {
  font-size: 0.8rem;
  color: #E9C46A;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== Toast 提示 ===== */
.toast-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: rgba(10, 31, 40, 0.9);
  backdrop-filter: blur(4px);
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(232, 240, 240, 0.2);
  font-size: 0.9rem;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  max-width: 80vw;
  text-align: center;
}

.toast.success {
  border-color: rgba(42, 157, 143, 0.5);
  background: rgba(42, 157, 143, 0.2);
}

.toast.warning {
  border-color: rgba(233, 196, 106, 0.5);
  background: rgba(233, 196, 106, 0.15);
}

.toast.danger {
  border-color: rgba(231, 111, 81, 0.5);
  background: rgba(231, 111, 81, 0.15);
}

.toast.pickup {
  border-color: rgba(255, 221, 153, 0.6);
  background: rgba(255, 221, 153, 0.2);
  color: #FFDD99;
  font-weight: bold;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* ===== 重心倾斜警告 ===== */
.tilt-warning {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(231, 111, 81, 0.2);
  border: 1px solid rgba(231, 111, 81, 0.5);
  color: #E76F51;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 60;
  animation: tiltPulse 1s ease-in-out infinite;
}

.tilt-warning.hidden {
  display: none;
}

@keyframes tiltPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ===== 新手引导 ===== */
.tutorial-tip {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  max-width: 400px;
  width: 90%;
}

.tutorial-tip.hidden {
  display: none;
}

.tutorial-content {
  background: rgba(10, 31, 40, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid #2A9D8F;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(42, 157, 143, 0.3);
}

.tutorial-content p {
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 0.95rem;
}

.tutorial-content button {
  padding: 8px 24px;
  background: #2A9D8F;
  border: none;
  color: white;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.tutorial-content button:hover {
  background: #32B8A8;
}

/* ===== 触屏控制 ===== */
#touchControls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}

#touchControls.hidden {
  display: none;
}

/* 虚拟摇杆 - 左侧偏上 */
#joystick {
  position: absolute;
  top: 140px;
  left: 30px;
  width: 120px;
  height: 120px;
  pointer-events: auto;
  touch-action: none;
}

#joystickBase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(10, 31, 40, 0.4);
  border: 2px solid rgba(232, 240, 240, 0.3);
  backdrop-filter: blur(4px);
}

#joystickKnob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.7);
  border: 2px solid rgba(232, 240, 240, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.1s;
}

#joystick.active #joystickKnob {
  background: rgba(42, 157, 143, 0.9);
}

/* 动作按钮 - 跳跃按钮在摇杆右侧 */
.action-group-right {
  position: absolute;
  top: 150px;
  left: 165px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

/* 钩子和攻击 - 右下角竖向排列 */
.action-group-main {
  position: absolute;
  bottom: 30px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

.touch-btn {
  border-radius: 50%;
  background: rgba(10, 31, 40, 0.6);
  border: 2px solid rgba(232, 240, 240, 0.3);
  backdrop-filter: blur(4px);
  color: #e8f0f0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

/* 小按钮 */
.touch-btn-sm {
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
}

/* 大按钮（钩子/攻击） */
.touch-btn-lg {
  width: 76px;
  height: 76px;
  font-size: 1.2rem;
}

.touch-btn-lg .btn-label {
  font-size: 2rem;
  line-height: 1;
}

.touch-btn-lg .btn-sublabel {
  font-size: 0.6rem;
  margin-top: 2px;
  color: rgba(232, 240, 240, 0.7);
}

/* 钩子按钮特殊颜色 */
.touch-btn-hook {
  background: rgba(42, 157, 143, 0.5);
  border-color: rgba(42, 157, 143, 0.6);
}

.touch-btn-hook:active {
  background: rgba(42, 157, 143, 0.9);
  border-color: #2A9D8F;
  transform: scale(0.92);
  box-shadow: 0 0 20px rgba(42, 157, 143, 0.4);
}

/* 攻击按钮特殊颜色 */
.touch-btn-attack {
  background: rgba(231, 111, 81, 0.5);
  border-color: rgba(231, 111, 81, 0.6);
}

.touch-btn-attack:active {
  background: rgba(231, 111, 81, 0.9);
  border-color: #E76F51;
  transform: scale(0.92);
  box-shadow: 0 0 20px rgba(231, 111, 81, 0.4);
}

.touch-btn-sm:active {
    background: rgba(42, 157, 143, 0.7);
    border-color: #2A9D8F;
    transform: scale(0.92);
  }

  /* 交互按钮特殊颜色 */
  .touch-btn-interact {
    background: rgba(42, 157, 143, 0.3);
    border-color: rgba(42, 157, 143, 0.5);
  }

  .touch-btn-interact:active {
    background: rgba(42, 157, 143, 0.8);
    border-color: #2A9D8F;
    transform: scale(0.92);
  }

/* 建造取消按钮 */
.touch-cancel-build {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background: rgba(231, 111, 81, 0.8);
  border: 2px solid rgba(231, 111, 81, 0.6);
  border-radius: 20px;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.touch-cancel-build.hidden {
  display: none;
}

.touch-cancel-build:active {
  background: rgba(231, 111, 81, 1);
  transform: translateX(-50%) scale(0.95);
}

/* 触屏设备显示 */
@media (pointer: coarse) {
  #touchControls.hidden {
    display: block;
  }
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .game-title {
    font-size: 2.5rem;
  }

  .menu-container {
    padding: 20px;
  }

  /* 主菜单装饰响应式 */
  .title-emoji-row {
    font-size: 1.5rem;
    letter-spacing: 6px;
  }

  .waves {
    height: 100px;
  }

  .floating-raft {
    font-size: 2.2rem;
    bottom: 10%;
    right: 5%;
  }

  .float-decor {
    padding: 80px 10px;
  }

  .decor-item {
    font-size: 1.5rem;
  }

  .decor-barrel, .decor-bottle { font-size: 1.3rem; }
  .decor-fish, .decor-shell { font-size: 1.2rem; }
  .decor-starfish { font-size: 1.1rem; }

  .fish-school {
    font-size: 1rem;
  }

  .fish-school-2 {
    font-size: 0.85rem;
  }

  .seagull {
    font-size: 1.2rem;
  }

  .seagull-2 {
    font-size: 1rem;
  }

  .bubble {
    opacity: 0.7;
  }

  .hotbar-slot {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }

  .action-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .inventory-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .panel {
    width: 95%;
    max-height: 85vh;
  }

  .hud-left, .hud-right {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* 触屏控制响应式 - 摇杆在上方 */
  #joystick {
    top: 120px;
    left: 16px;
    width: 100px;
    height: 100px;
  }

  #joystickBase {
    width: 100px;
    height: 100px;
  }

  #joystickKnob {
    width: 42px;
    height: 42px;
  }

  .action-group-right {
    top: 130px;
    left: 130px;
    gap: 8px;
  }

  .action-group-main {
    bottom: 16px;
    right: 14px;
    gap: 10px;
  }

  .touch-btn {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
}

/* 触屏设备底部HUD保持低位（摇杆已移至上方） */
@media (pointer: coarse) {
  #hud-bottom {
    bottom: 10px;
  }
}

@media (max-width: 480px) {
  .game-title {
    font-size: 2rem;
  }

  .game-subtitle {
    font-size: 0.9rem;
    margin-bottom: 30px;
  }

  /* 主菜单装饰小屏适配 */
  .title-emoji-row {
    font-size: 1.3rem;
    letter-spacing: 4px;
    margin-bottom: 8px;
  }

  .waves {
    height: 80px;
  }

  .floating-raft {
    font-size: 1.8rem;
    bottom: 8%;
    right: 3%;
  }

  .float-decor {
    padding: 100px 6px;
  }

  .decor-item {
    font-size: 1.2rem;
    opacity: 0.2;
  }

  .decor-barrel, .decor-bottle { font-size: 1.1rem; }
  .decor-fish, .decor-shell { font-size: 1rem; }
  .decor-starfish { font-size: 0.9rem; }

  .fish-school {
    font-size: 0.85rem;
    opacity: 0.2;
  }

  .fish-school-2 {
    font-size: 0.75rem;
  }

  .seagull {
    font-size: 1rem;
    opacity: 0.3;
  }

  .seagull-2 {
    font-size: 0.85rem;
  }

  .btn.btn-primary.btn-glow {
    font-size: 1rem;
    padding: 14px 28px;
  }

  .menu-buttons .btn {
    font-size: 0.95rem;
    padding: 12px 24px;
  }

  .hotbar-slot {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .help-content {
    font-size: 0.9rem;
  }

  /* 触屏控制更小 - 摇杆在上方 */
  #joystick {
    top: 100px;
    left: 10px;
    width: 90px;
    height: 90px;
  }

  #joystickBase {
    width: 90px;
    height: 90px;
  }

  #joystickKnob {
    width: 36px;
    height: 36px;
  }

  .action-group-right {
    top: 110px;
    left: 115px;
    gap: 6px;
  }

  .action-group-main {
    bottom: 12px;
    right: 10px;
    gap: 8px;
  }

  .touch-btn {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }

  .stat-track {
    width: 80px;
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(232, 240, 240, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 240, 240, 0.3);
}

/* ===== 难度选择 ===== */
.difficulty-container {
  max-width: 700px;
  width: 92%;
}

.difficulty-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
  justify-content: center;
}

.difficulty-card {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  padding: 20px 16px;
  background: rgba(10, 30, 40, 0.8);
  border: 2px solid rgba(232, 240, 240, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #e8f0f0;
}

.difficulty-card:hover {
  border-color: rgba(42, 157, 143, 0.6);
  background: rgba(42, 157, 143, 0.1);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.difficulty-card:active {
  transform: scale(0.97);
}

.diff-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.diff-name {
  font-size: 1.3rem;
  font-weight: bold;
}

.diff-desc {
  font-size: 0.78rem;
  color: rgba(232, 240, 240, 0.6);
  text-align: center;
  min-height: 36px;
}

.diff-stats {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 0.7rem;
  color: rgba(232, 240, 240, 0.5);
  text-align: left;
  width: 100%;
}

.diff-stats li {
  padding: 2px 0;
  border-top: 1px solid rgba(232, 240, 240, 0.06);
}

@media (max-width: 600px) {
  .difficulty-options {
    flex-direction: column;
    align-items: center;
  }
  .difficulty-card {
    min-width: 90%;
    max-width: 90%;
  }
}

/* ===== 事件通知 ===== */
.event-notification {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 30, 40, 0.92);
  border: 2px solid;
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9000;
  max-width: 90%;
  animation: eventSlideDown 0.4s ease-out, eventFadeOut 0.5s ease-in 25s forwards;
  backdrop-filter: blur(8px);
}

@keyframes eventSlideDown {
  from { transform: translate(-50%, -80px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes eventFadeOut {
  to { opacity: 0; transform: translate(-50%, -20px); }
}

.event-notification .event-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.event-notification .event-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-notification .event-name {
  font-size: 1.1rem;
  font-weight: bold;
}

.event-notification .event-desc {
  font-size: 0.8rem;
  color: rgba(232, 240, 240, 0.7);
}

/* ===== 胜利结局 ===== */

/* 得救动画层 */
.rescue-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.rescue-animation.active .rescue-flash {
  animation: rescueFlash 1.5s ease-out forwards;
}

@keyframes rescueFlash {
  0% {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,215,0,0) 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
  }
  20% {
    width: 100px;
    height: 100px;
    opacity: 1;
  }
  100% {
    width: 200vmax;
    height: 200vmax;
    opacity: 0;
  }
}

.rescue-animation.active .rescue-ship {
  position: absolute;
  bottom: 15%;
  right: -20%;
  font-size: 6rem;
  animation: rescueShipSail 4s ease-in-out forwards;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

@keyframes rescueShipSail {
  0% {
    right: -20%;
    transform: translateY(0) rotate(-3deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(0) rotate(-2deg);
  }
  75% {
    transform: translateY(-10px) rotate(1deg);
  }
  100% {
    right: 50%;
    transform: translateX(50%) translateY(0) rotate(0deg);
  }
}

.rescue-animation.active .rescue-birds {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 40%;
}

.rescue-animation.active .bird {
  position: absolute;
  font-size: 2rem;
  opacity: 0;
}

.rescue-animation.active .bird-1 {
  top: 10%;
  animation: birdFlyAcross 3s ease-in-out forwards;
  animation-delay: 1.5s;
}

.rescue-animation.active .bird-2 {
  top: 25%;
  animation: birdFlyAcross 3.5s ease-in-out forwards;
  animation-delay: 1.8s;
}

.rescue-animation.active .bird-3 {
  top: 40%;
  animation: birdFlyAcross 2.8s ease-in-out forwards;
  animation-delay: 2.1s;
}

@keyframes birdFlyAcross {
  0% {
    left: -10%;
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: scale(1.1) translateY(-10px);
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
    transform: scale(0.9);
  }
}

.rescue-animation.active .rescue-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rescue-animation.active .rescue-confetti span {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0;
  animation: confettiFall 3.5s ease-in forwards;
}

.rescue-animation.active .rescue-confetti span:nth-child(1)  { left: 8%;  animation-delay: 3.0s; }
.rescue-animation.active .rescue-confetti span:nth-child(2)  { left: 18%; animation-delay: 3.2s; }
.rescue-animation.active .rescue-confetti span:nth-child(3)  { left: 28%; animation-delay: 3.1s; }
.rescue-animation.active .rescue-confetti span:nth-child(4)  { left: 38%; animation-delay: 3.3s; }
.rescue-animation.active .rescue-confetti span:nth-child(5)  { left: 48%; animation-delay: 3.0s; }
.rescue-animation.active .rescue-confetti span:nth-child(6)  { left: 58%; animation-delay: 3.4s; }
.rescue-animation.active .rescue-confetti span:nth-child(7)  { left: 68%; animation-delay: 3.1s; }
.rescue-animation.active .rescue-confetti span:nth-child(8)  { left: 78%; animation-delay: 3.2s; }
.rescue-animation.active .rescue-confetti span:nth-child(9)  { left: 88%; animation-delay: 3.3s; }
.rescue-animation.active .rescue-confetti span:nth-child(10) { left: 13%; animation-delay: 3.5s; }
.rescue-animation.active .rescue-confetti span:nth-child(11) { left: 53%; animation-delay: 3.4s; }
.rescue-animation.active .rescue-confetti span:nth-child(12) { left: 93%; animation-delay: 3.1s; }

@keyframes confettiFall {
  0% {
    top: -10%;
    opacity: 0;
    transform: rotate(0deg) translateX(0);
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) translateX(20px);
  }
  100% {
    top: 110%;
    opacity: 0.7;
    transform: rotate(360deg) translateX(-20px);
  }
}

.rescue-animation.active .rescue-text {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 3.5rem;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
  opacity: 0;
  animation: rescueTextPop 1.5s ease-out forwards;
  animation-delay: 3.5s;
  white-space: nowrap;
}

@keyframes rescueTextPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.rescue-animation.active .rescue-subtext {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: rgba(232, 240, 240, 0.9);
  opacity: 0;
  animation: rescueSubtextFade 2s ease-out forwards;
  animation-delay: 4.0s;
  white-space: nowrap;
}

@keyframes rescueSubtextFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  30%, 70% {
    opacity: 1;
  }
}

.victory-container {
  max-width: 500px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.victory-title {
  font-size: 2.5rem;
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  margin-bottom: 12px;
  animation: victoryGlow 2s ease-in-out infinite alternate;
}

@keyframes victoryGlow {
  from { text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
  to { text-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
}

.victory-content {
  margin: 20px 0;
}

.victory-subtitle {
  font-size: 1rem;
  color: rgba(232, 240, 240, 0.8);
  margin-bottom: 10px;
}

.victory-stats {
  font-size: 1.3rem;
  color: #e8f0f0;
  margin: 10px 0;
}

.victory-stats strong {
  color: #FFD700;
  font-size: 1.6rem;
}

.victory-details {
  font-size: 0.85rem;
  color: rgba(232, 240, 240, 0.6);
  margin: 10px 0;
}

.victory-emoji {
  font-size: 4rem;
  margin: 16px 0;
  animation: shipBob 3s ease-in-out infinite;
}

@keyframes shipBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* ===== 救援进度面板 ===== */
.rescue-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 30, 40, 0.95);
  border: 2px solid rgba(232, 240, 240, 0.2);
  border-radius: 12px;
  padding: 0;
  z-index: 8000;
  width: 360px;
  max-width: 92%;
  max-height: 85vh;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.rescue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.1);
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
}

.rescue-header .close-btn {
  background: none;
  border: none;
  color: rgba(232, 240, 240, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.rescue-header .close-btn:hover {
  background: rgba(232, 240, 240, 0.1);
  color: #e8f0f0;
}

.rescue-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.rescue-progress-bar {
  position: relative;
  width: 100%;
  height: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}

.rescue-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #E76F51, #F4A261, #FFD700);
  border-radius: 12px;
  transition: width 0.5s ease;
  min-width: 3px;
}

.rescue-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: bold;
  color: #e8f0f0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.rescue-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.rescue-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(232, 240, 240, 0.8);
}

.rescue-info-row span:last-child {
  color: #FFD700;
  font-weight: bold;
}

.rescue-buildings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.rescue-building-item {
  background: rgba(42, 157, 143, 0.15);
  border: 1px solid rgba(42, 157, 143, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: rgba(232, 240, 240, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: space-between;
}

.rescue-building-item.inactive {
  background: rgba(100, 100, 100, 0.1);
  border-color: rgba(100, 100, 100, 0.2);
  opacity: 0.7;
}

.rescue-bld-status {
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.rescue-bld-status.active {
  background: rgba(76, 175, 80, 0.25);
  color: #4CAF50;
}

.rescue-bld-status.inactive {
  background: rgba(231, 111, 81, 0.2);
  color: #E76F51;
}

.rescue-bld-bonus.dim {
  color: rgba(232, 240, 240, 0.3);
}

.rescue-bld-icon {
  font-size: 0.9rem;
}

.rescue-bld-name {
  flex: 1;
  font-weight: 600;
}

.rescue-bld-bonus {
  color: #4CAF50;
  font-weight: bold;
}

/* ===== 成就面板 ===== */
.achievement-progress-bar {
  position: relative;
  width: 100%;
  height: 24px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F4A261, #E9C46A);
  border-radius: 12px;
  transition: width 0.4s ease;
}

.achievement-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(244, 162, 97, 0.1);
  border: 1px solid rgba(244, 162, 97, 0.25);
  border-radius: 8px;
  transition: all 0.15s;
}

.achievement-item.locked {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  opacity: 0.65;
}

.achievement-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.achievement-icon.grayed {
  filter: grayscale(1);
  opacity: 0.5;
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #F4A261;
  margin-bottom: 2px;
}

.achievement-item.locked .achievement-name {
  color: rgba(232, 240, 240, 0.5);
}

.achievement-desc {
  font-size: 0.75rem;
  color: rgba(232, 240, 240, 0.6);
  margin-bottom: 4px;
}

.achievement-progress-mini {
  position: relative;
  width: 100%;
  height: 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}

.achievement-progress-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #2A9D8F, #4CAF50);
  border-radius: 8px;
  transition: width 0.3s ease;
}

.achievement-progress-mini span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.achievement-reward {
  display: inline-block;
  font-size: 0.7rem;
  color: #FFD700;
  margin-top: 2px;
}

.achievement-status {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ===== 任务面板 ===== */
.quest-active {
  margin-bottom: 16px;
}

.quest-card {
  padding: 14px;
  background: rgba(42, 157, 143, 0.12);
  border: 1px solid rgba(42, 157, 143, 0.3);
  border-radius: 10px;
}

.quest-card.active {
  border-color: rgba(42, 157, 143, 0.5);
  box-shadow: 0 0 12px rgba(42, 157, 143, 0.15);
}

.quest-card.completed-all {
  text-align: center;
  background: rgba(244, 162, 97, 0.12);
  border-color: rgba(244, 162, 97, 0.3);
  color: #F4A261;
  font-weight: bold;
  padding: 20px;
}

.quest-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.quest-icon {
  font-size: 1.6rem;
}

.quest-name {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  flex: 1;
}

.quest-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  background: rgba(42, 157, 143, 0.3);
  color: #2A9D8F;
  border-radius: 10px;
  white-space: nowrap;
}

.quest-desc {
  font-size: 0.8rem;
  color: rgba(232, 240, 240, 0.7);
  margin-bottom: 8px;
}

.quest-story {
  font-size: 0.78rem;
  color: #E9C46A;
  font-style: italic;
  padding: 8px 12px;
  background: rgba(233, 196, 106, 0.08);
  border-left: 3px solid rgba(233, 196, 106, 0.4);
  border-radius: 4px;
  line-height: 1.5;
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quest-list-item {
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}

.quest-list-item.completed {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.2);
}

.quest-list-item.active {
  background: rgba(42, 157, 143, 0.1);
  border-color: rgba(42, 157, 143, 0.25);
}

.quest-list-item.locked {
  opacity: 0.4;
}

.quest-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-list-icon {
  font-size: 1.1rem;
}

.quest-list-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(232, 240, 240, 0.85);
}

.quest-list-status {
  font-size: 0.68rem;
  color: rgba(232, 240, 240, 0.5);
  white-space: nowrap;
}

.quest-list-desc {
  font-size: 0.72rem;
  color: rgba(232, 240, 240, 0.5);
  margin-top: 4px;
  margin-left: 24px;
}

.quest-list-story {
  font-size: 0.7rem;
  color: #E9C46A;
  font-style: italic;
  margin-top: 4px;
  margin-left: 24px;
  padding: 6px 8px;
  background: rgba(233, 196, 106, 0.06);
  border-left: 2px solid rgba(233, 196, 106, 0.3);
  border-radius: 3px;
  line-height: 1.5;
}

/* ===== 宠物面板 ===== */
.pet-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8899a6;
}

.pet-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.pet-empty p {
  margin: 4px 0;
  font-size: 0.95rem;
}

.pet-empty-hint {
  font-size: 0.8rem !important;
  color: #6b7a85;
  margin-top: 12px !important;
}

.pet-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(233, 196, 106, 0.2);
}

.pet-avatar {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: rgba(233, 196, 106, 0.1);
  border-radius: 12px;
  border: 2px solid rgba(233, 196, 106, 0.3);
}

.pet-info {
  flex: 1;
}

.pet-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #E9C46A;
  margin-bottom: 4px;
}

.pet-level {
  font-size: 0.8rem;
  color: #8899a6;
}

.pet-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.pet-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pet-stat-label {
  font-size: 0.75rem;
  color: #8899a6;
  display: flex;
  justify-content: space-between;
}

.pet-stat-bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pet-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pet-stat-hunger {
  background: linear-gradient(90deg, #E76F51, #F4A261);
}

.pet-stat-happiness {
  background: linear-gradient(90deg, #2A9D8F, #7BC8A4);
}

.pet-stat-health {
  background: linear-gradient(90deg, #E63946, #F77F7F);
}

.pet-stat-trust {
  background: linear-gradient(90deg, #E9C46A, #F4D35E);
}

.pet-stat-exp {
  background: linear-gradient(90deg, #8E7CC3, #B8A9E0);
}

.pet-stat-value {
  font-size: 0.7rem;
  color: #6b7a85;
  text-align: right;
}

.pet-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(42, 157, 143, 0.3);
}

.pet-status-label {
  font-size: 0.8rem;
  color: #8899a6;
}

.pet-status-value {
  font-size: 0.85rem;
  color: #2A9D8F;
  font-weight: bold;
}

.pet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.pet-action-btn {
  padding: 10px 8px;
  border: 1px solid rgba(233, 196, 106, 0.3);
  background: rgba(233, 196, 106, 0.1);
  color: #E9C46A;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.pet-action-btn:hover {
  background: rgba(233, 196, 106, 0.2);
  border-color: rgba(233, 196, 106, 0.5);
  transform: translateY(-1px);
}

.pet-action-btn:active {
  transform: translateY(0);
}

.pet-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.pet-loot {
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(42, 157, 143, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(42, 157, 143, 0.2);
}

.pet-loot-title {
  font-size: 0.8rem;
  color: #8899a6;
  margin-bottom: 8px;
}

.pet-loot-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pet-loot-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.8rem;
}

.pet-loot-item-icon {
  font-size: 1rem;
}

.pet-tips {
  padding: 10px 12px;
  background: rgba(233, 196, 106, 0.05);
  border-radius: 8px;
  border-left: 3px solid rgba(233, 196, 106, 0.3);
}

.pet-tips p {
  font-size: 0.75rem;
  color: #E9C46A;
  margin: 0 0 6px 0;
  font-weight: bold;
}

.pet-tips ul {
  margin: 0;
  padding-left: 16px;
}

.pet-tips li {
  font-size: 0.72rem;
  color: #8899a6;
  line-height: 1.6;
  margin-bottom: 2px;
}

/* 剧情弹窗 */
.story-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.story-dialog-overlay.hidden {
  display: none;
}

.story-dialog {
  width: 88%;
  max-width: 480px;
  max-height: 85vh;
  background: linear-gradient(135deg, rgba(10, 31, 40, 0.98), rgba(15, 59, 66, 0.98));
  border: 1px solid rgba(233, 196, 106, 0.3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.story-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(233, 196, 106, 0.15);
}

.story-dialog-icon {
  font-size: 2rem;
}

.story-dialog-header h3 {
  font-size: 1.2rem;
  color: #E9C46A;
  flex: 1;
}

.story-dialog-body {
  padding: 16px 24px;
}

.story-dialog-body .story-desc {
  font-size: 0.85rem;
  color: rgba(232, 240, 240, 0.7);
  margin-bottom: 12px;
}

.story-dialog-body .story-text {
  font-size: 0.92rem;
  color: #E9C46A;
  font-style: italic;
  line-height: 1.8;
  padding: 12px 16px;
  background: rgba(233, 196, 106, 0.06);
  border-left: 3px solid rgba(233, 196, 106, 0.4);
  border-radius: 4px;
}

.story-dialog-reward {
  padding: 0 24px 8px;
  font-size: 0.82rem;
  color: #2A9D8F;
  font-weight: 600;
}

.story-dialog-next {
  padding: 12px 24px;
  margin: 0 16px;
  border-top: 1px solid rgba(232, 240, 240, 0.08);
}

.story-next-label {
  font-size: 0.7rem;
  color: rgba(232, 240, 240, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.story-next-name {
  font-size: 0.9rem;
  color: rgba(232, 240, 240, 0.85);
  font-weight: 600;
  margin-top: 4px;
}

.story-next-desc {
  font-size: 0.75rem;
  color: rgba(232, 240, 240, 0.5);
  margin-top: 4px;
}

.story-dialog-close {
  margin: 16px 24px 20px;
  align-self: center;
  min-width: 120px;
}

.rescue-bld-dur {
  color: rgba(232, 240, 240, 0.5);
  font-size: 0.68rem;
}

.rescue-tip {
  font-size: 0.7rem;
  color: rgba(232, 240, 240, 0.4);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

/* ===== 调试控制台 ===== */
.console-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 520px;
  max-height: 85vh;
  background: rgba(8, 25, 33, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(42, 157, 143, 0.4);
  border-radius: 12px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.console-panel.hidden {
  display: none;
}

.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(42, 157, 143, 0.3);
  background: rgba(42, 157, 143, 0.1);
}

.console-header h3 {
  font-size: 1rem;
  color: #2A9D8F;
}

.console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(232, 240, 240, 0.1);
}

.console-tab {
  padding: 5px 10px;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid rgba(232, 240, 240, 0.15);
  border-radius: 6px;
  color: rgba(232, 240, 240, 0.6);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.console-tab:hover {
  border-color: rgba(42, 157, 143, 0.5);
  color: #e8f0f0;
}

.console-tab.active {
  background: rgba(42, 157, 143, 0.25);
  border-color: #2A9D8F;
  color: #fff;
}

.console-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 12px;
  min-height: 0;
}

.console-section {
  display: none;
}

.console-section.active {
  display: block;
}

.console-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.console-label {
  font-size: 0.8rem;
  color: rgba(232, 240, 240, 0.7);
  white-space: nowrap;
}

.console-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.8rem;
  background: rgba(42, 157, 143, 0.15);
  border: 1px solid rgba(42, 157, 143, 0.3);
  border-radius: 6px;
  color: #e8f0f0;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.console-btn:hover {
  background: rgba(42, 157, 143, 0.35);
  border-color: #2A9D8F;
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.2);
}

.console-btn:active {
  transform: scale(0.97);
}

.console-btn.btn-primary {
  background: linear-gradient(135deg, #E76F51, #F4A261);
  border-color: #E76F51;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 10px;
}

.console-btn.btn-primary:hover {
  background: linear-gradient(135deg, #f08a6e, #f7b98a);
  box-shadow: 0 4px 15px rgba(231, 111, 81, 0.4);
}

.console-btn.speed-btn {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 6px 8px;
  font-size: 0.75rem;
}

.console-btn.speed-btn.active {
  background: rgba(42, 157, 143, 0.5);
  border-color: #2A9D8F;
}

/* 物品筛选 */
.console-filter {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.console-filter-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  background: rgba(232, 240, 240, 0.08);
  border: 1px solid rgba(232, 240, 240, 0.15);
  border-radius: 12px;
  color: rgba(232, 240, 240, 0.7);
  cursor: pointer;
  transition: all 0.15s;
}

.console-filter-btn:hover {
  background: rgba(42, 157, 143, 0.2);
  color: #e8f0f0;
}

.console-filter-btn.active {
  background: #2A9D8F;
  border-color: #2A9D8F;
  color: #fff;
}

.console-input {
  width: 70px;
  padding: 7px 8px;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 240, 240, 0.2);
  border-radius: 6px;
  color: #e8f0f0;
  text-align: center;
}

.console-input:focus {
  outline: none;
  border-color: #2A9D8F;
}

.console-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 2px;
}

.console-item-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(232, 240, 240, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.65rem;
  color: rgba(232, 240, 240, 0.7);
  text-align: center;
  gap: 2px;
}

.console-item-cell:hover {
  border-color: rgba(42, 157, 143, 0.5);
  background: rgba(42, 157, 143, 0.1);
}

.console-item-cell.selected {
  border-color: #2A9D8F;
  background: rgba(42, 157, 143, 0.2);
  color: #fff;
}

.console-item-cell .ci-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.console-stat {
  font-size: 0.75rem;
  color: rgba(232, 240, 240, 0.5);
  line-height: 1.7;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-top: 8px;
  font-family: monospace;
  word-break: break-all;
}

/* 触屏控制台按钮 - 添加到HUD */
#btnTouchConsole {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(231, 111, 81, 0.8);
  border: 1px solid #E76F51;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btnTouchConsole:hover {
  background: rgba(231, 111, 81, 1);
}

@media (max-width: 768px) {
  .console-panel {
    width: 95%;
    max-height: 80vh;
  }
  
  .console-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  }
  
  .console-btn {
    font-size: 0.72rem;
    padding: 7px 6px;
  }
}

/* ===== 剧情面板：章节目标 / 警觉条 / 日志碎片 ===== */
.story-chapter-card {
  border-color: rgba(233, 196, 106, 0.28);
  background: rgba(233, 196, 106, 0.06);
}

.story-objectives {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.story-obj {
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(232, 240, 240, 0.9);
}

.story-obj.done {
  color: rgba(232, 240, 240, 0.42);
  text-decoration: line-through;
}

.story-obj-hint {
  display: block;
  margin-left: 20px;
  font-size: 0.68rem;
  color: rgba(79, 195, 247, 0.75);
}

.story-pressure {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(239, 83, 80, 0.07);
  border: 1px solid rgba(239, 83, 80, 0.18);
  font-size: 0.74rem;
  color: rgba(232, 240, 240, 0.85);
}

.story-pressure-bar {
  margin-top: 6px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.story-pressure-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
}

.story-pressure-tip {
  margin-top: 5px;
  font-size: 0.66rem;
  color: rgba(232, 240, 240, 0.5);
}

.quest-section-title {
  margin: 14px 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(232, 240, 240, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 4px;
}

.story-count {
  color: rgba(233, 196, 106, 0.8);
  font-weight: 400;
}

.journal-item {
  cursor: pointer;
}

.journal-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(233, 196, 106, 0.25);
}