/* ============================================================
   style.css —— 《疯狂水世界·生存者》主样式
   风格：叙事型彩漫（高饱和、粗描边、偏移阴影、圆角卡片）
   ============================================================ */

/* ---------- 1. 变量与重置 ---------- */
:root {
  --sea-1: #1B6B8A;
  --sea-2: #2E9BC0;
  --sky-hot: #F4A460;
  --sky-cool: #87CEEB;
  --ink: #2C1810;
  --wood: #8B4513;
  --rust-1: #8B7355;
  --rust-2: #C0C0C0;
  --plastic: #E0E0E0;
  --gold: #F2C14E;
  --cream: #FFF3D6;
  --paper: #FDF6E3;
  --card: #FFFAF0;
  --green: #4A7C59;
  --red: #C0392B;
  --blue: #2E86C1;
  --radius: 12px;
  --border: 3px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: #071a24;
  overscroll-behavior: none;
}

body { user-select: none; }

button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
.hidden { display: none !important; }
.muted { color: #7a6a5c; font-size: 13px; line-height: 1.6; }
.warn-text { color: var(--red); font-weight: 700; }

/* ---------- 2. 通用组件 ---------- */
.comic-card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;              /* 需求：点击目标最小 44×44 */
  min-width: 44px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease, background 160ms ease;
}
.btn:hover { background: #FFE9B0; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--gold); }
.btn-primary:hover { background: #FFD769; }
.btn-danger { background: #F5B7B1; }
.btn-ghost { background: #F2EAE0; }
.btn-mini { min-height: 34px; min-width: 34px; padding: 4px 10px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }
.btn-big { min-height: 54px; font-size: 19px; padding: 10px 30px; }
.btn-close { min-height: 40px; min-width: 40px; padding: 0; font-size: 18px; background: #F5B7B1; }
.btn.disabled, .btn:disabled { filter: grayscale(0.8); opacity: 0.6; cursor: not-allowed; }

.panel-h3 { font-size: 16px; margin: 14px 0 8px; border-bottom: 2px dashed rgba(44,24,16,0.3); padding-bottom: 4px; }

/* ---------- 3. 屏幕切换 ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
}
.screen.is-active { display: flex; }

/* ---------- 4. 主菜单 ---------- */
#screen-menu {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--sky-hot) 0%, var(--sky-cool) 42%, var(--sea-2) 43%, var(--sea-1) 100%);
  overflow: hidden;
}
.menu-sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFE9A8, #F4A460 70%, rgba(244,164,96,0) 72%);
  filter: blur(1px);
  animation: sunPulse 6s ease-in-out infinite;
}
.menu-gull {
  position: absolute;
  top: 18%; left: 14%;
  font-size: 30px;
  cursor: pointer;
  animation: gullFly 12s linear infinite;
  filter: drop-shadow(2px 2px 0 rgba(44,24,16,0.4));
}
.menu-panel {
  position: relative;
  z-index: 3;
  width: min(92vw, 560px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 22px 20px;
  text-align: center;
}
.menu-logo { cursor: pointer; }
.menu-logo h1 {
  font-size: clamp(28px, 8vw, 52px);
  letter-spacing: 4px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--gold), 6px 6px 0 rgba(44,24,16,0.25);
  animation: logoBob 3.4s ease-in-out infinite;
}
.menu-sub { font-size: clamp(13px, 3vw, 18px); letter-spacing: 10px; margin-top: 2px; color: var(--wood); }
.menu-tagline { margin: 14px 0 18px; font-size: 14px; line-height: 1.7; color: #5b4a3d; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; }
.menu-buttons .btn { width: 100%; }
.menu-save-hint { margin-top: 14px; font-size: 12.5px; color: #6b5a4a; line-height: 1.6; word-break: break-all; }
.menu-credit { position: absolute; bottom: 8px; z-index: 3; font-size: 11px; color: rgba(255,255,255,0.85); text-align: center; padding: 0 12px; }

/* ---------- 5. 顶栏 ---------- */
#topbar {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  padding: 6px 8px 4px;
  background: linear-gradient(180deg, rgba(44,24,16,0.96), rgba(44,24,16,0.86));
  border-bottom: 3px solid var(--ink);
  color: var(--cream);
}
.topbar-row { display: flex; align-items: center; gap: 8px; }
.topbar-row-2 { justify-content: space-between; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.resource-bar { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.res-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255,243,214,0.12);
  border: 2px solid rgba(255,243,214,0.35);
  border-radius: 999px;
  font-size: 13px;
  transition: transform 140ms ease, background 200ms ease;
}
.res-cell .res-icon { font-size: 15px; }
.res-cell .res-value { font-weight: 800; min-width: 20px; text-align: right; }
.res-cell .res-rate { font-size: 10px; opacity: 0.75; }
.res-cell.gain { background: rgba(74,124,89,0.55); transform: translateY(-4px) scale(1.06); }
.res-cell.lose { background: rgba(192,57,43,0.55); transform: translateY(2px) scale(0.97); }
.res-cell.at-cap { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,193,78,0.4); }
.chapter-block { flex: 1; min-width: 180px; }
.chapter-line { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; }
.chapter-line .muted { color: rgba(255,243,214,0.7); }
.chapter-progress {
  height: 8px; margin-top: 3px;
  background: rgba(0,0,0,0.35);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.chapter-progress i { display: block; height: 100%; width: 12%; background: linear-gradient(90deg, var(--gold), #FFE9A8); transition: width 500ms ease; }
.stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(255,243,214,0.14);
  border: 2px solid rgba(255,243,214,0.35);
  border-radius: 999px;
}
.chip.bad { background: rgba(192,57,43,0.5); border-color: #F5B7B1; }

/* ---------- 6. 任务横幅 ---------- */
#quest-banner {
  position: relative;
  z-index: 15;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: rgba(255,243,214,0.94);
  border-bottom: 3px solid var(--ink);
  font-size: 13px;
  flex-wrap: wrap;
}
.quest-main { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.quest-label {
  padding: 1px 7px;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: 11px;
}
.quest-side { display: flex; gap: 6px; flex-wrap: wrap; }
.quest-side-chip { font-size: 11.5px; color: #6b5a4a; background: rgba(44,24,16,0.08); padding: 2px 7px; border-radius: 999px; }

/* ---------- 7. 舞台 / 海面 / 木筏 ---------- */
#stage { position: relative; flex: 1 1 auto; overflow: hidden; }
.ocean {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-hot) 0%, var(--sky-cool) 30%, var(--sea-2) 34%, var(--sea-1) 100%);
  transition: background 1.2s ease;
}
.ocean[data-weather="fog"] { background: linear-gradient(180deg, #B9BFC4 0%, #CFD6DA 30%, #4E7E8F 34%, #2C5A6B 100%); }
.ocean[data-weather="storm"] { background: linear-gradient(180deg, #3B4A55 0%, #52646F 30%, #1D4A5C 34%, #10323F 100%); }
.sky-band { position: absolute; top: 0; left: 0; right: 0; height: 30%; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 44px); }
.sun {
  position: absolute; top: 4%; left: 8%;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF6D6, var(--gold) 68%, rgba(242,193,78,0) 70%);
  box-shadow: 0 0 40px rgba(242,193,78,0.55);
}
.clouds { position: absolute; top: 6%; left: 0; right: 0; height: 60px; font-size: 26px; pointer-events: none; }
.clouds span { position: absolute; opacity: 0.85; animation: cloudDrift 46s linear infinite; }
.clouds span:nth-child(1) { top: 0; animation-duration: 52s; }
.clouds span:nth-child(2) { top: 18px; left: 40%; animation-duration: 68s; animation-delay: -12s; }
.clouds span:nth-child(3) { top: 4px; left: 70%; animation-duration: 78s; animation-delay: -30s; }

/* 海浪：CSS transform 循环位移（需求：不要 JS 逐帧计算） */
.wave {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 26px;
  background-repeat: repeat-x;
  background-size: 200px 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='26' viewBox='0 0 200 26'><path d='M0 16 Q 25 4 50 16 T 100 16 T 150 16 T 200 16 L200 26 L0 26 Z' fill='%23ffffff' opacity='0.32'/></svg>");
  animation: waveMove 9s linear infinite;
  pointer-events: none;
}
.wave-1 { bottom: 22%; opacity: 0.55; animation-duration: 9s; }
.wave-2 { bottom: 14%; opacity: 0.45; animation-duration: 13s; animation-direction: reverse; }
.wave-3 { bottom: 6%; opacity: 0.35; animation-duration: 17s; }

/* ============================================================
   Raft 风格世界层
   世界坐标由 js/world.js 定义（像素），这里只负责“把平面压成俯视斜角”
   以及实体的外观。整个倾斜走 CSS 3D，GPU 合成，无逐帧 JS 计算。
   ============================================================ */
#world {
  position: absolute;
  left: 0; top: 0;
  /* 不用 CSS 3D 透视：perspective 会让屏幕坐标与世界坐标不再 1:1，
     实测导致甲板与角色错位两个身位。改成“斜向拉伸 + 分层缩放/阴影”来伪造俯视角度，
     坐标严格 1:1，性能也更好（无 3D 合成层）。 */
  transform: none;
}

/* ---------- 甲板 ---------- */
#deck-layer {
  position: absolute;
  z-index: 3;                 /* 水面之下：保证漂浮物（z 更大）浮在甲板上面 */
  transform-style: preserve-3d;
  pointer-events: none;       /* 甲板只做视觉，命中交给具体实体 */
}
#building-layer { pointer-events: none; }
#building-layer .building { pointer-events: auto; }
#deck-planks {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, #A9683A 0%, #8B4513 45%, #6E3610 100%);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow:
    0 18px 26px rgba(0,0,0,0.45),
    inset 0 0 40px rgba(0,0,0,0.35);
  overflow: hidden;
}
.plank {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,214,150,0.30), rgba(120,66,26,0.30));
  border: 1.5px solid rgba(44,24,16,0.55);
  border-radius: 4px;
}
.plank.alt { background: linear-gradient(180deg, rgba(255,214,150,0.18), rgba(120,66,26,0.40)); }
.plank::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 46%;
  height: 1.5px; background: rgba(44,24,16,0.35);
}
/* 边缘浮筒：让木筏看起来是“桶 + 木板”拼的 */
.barrel {
  position: absolute;
  background: linear-gradient(180deg, #C98B4B, #8B5A2B);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.barrel::after {
  content: "";
  position: absolute; left: 12%; right: 12%; top: 40%;
  height: 2px; background: rgba(44,24,16,0.5);
}

#building-layer, #decor-layer { position: absolute; inset: 0; }
#building-layer { z-index: 6; }
#decor-layer { z-index: 5; pointer-events: none; }

/* ---------- 建筑（带体积感的 2.5D 方块） ---------- */
.building {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  background: none;
  border: none;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 120ms ease;
}
.bld-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FFF6E2, #D8C49A);
  border: 3px solid var(--ink);
  border-radius: 8px;
  /* 用向下的“墙体”投影伪造高度，越靠画面下方越厚 */
  box-shadow: 0 8px 0 rgba(44,24,16,0.9), 0 14px 18px rgba(0,0,0,0.35);
  transform: translateZ(14px);
}
.bld-top {
  position: absolute;
  left: -3px; right: -3px; top: -3px;
  height: 34%;
  background: linear-gradient(160deg, #FFFDF6, #F0E2C2);
  border: 3px solid var(--ink);
  border-bottom: none;
  border-radius: 8px 8px 4px 4px;
}
.building-icon { font-size: 24px; line-height: 1; position: relative; transform: translateZ(22px); filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.3)); }
.building-name { position: relative; font-size: 10.5px; font-weight: 800; white-space: nowrap; transform: translateZ(20px); text-shadow: 0 1px 0 #fff; }
.building:hover { transform: translateZ(6px) scale(1.03); }
.building.just-built { animation: buildPop 760ms cubic-bezier(.2,1.5,.4,1); }
.building.under-construction .bld-body { background: repeating-linear-gradient(45deg, #E9D8B4 0 8px, #D8C49A 8px 16px); }
.building.unpowered { filter: saturate(0.45); }
.building.has-skin .bld-body { border-color: var(--gold); box-shadow: 0 8px 0 #8B6508, 0 0 16px rgba(242,193,78,0.9); }
.build-bar { position: absolute; left: 8%; right: 8%; bottom: 4px; height: 7px; background: rgba(0,0,0,0.45); border-radius: 4px; overflow: hidden; transform: translateZ(18px); }
.build-bar i { display: block; height: 100%; background: var(--gold); transition: width 200ms linear; }
.build-emoji { position: absolute; top: 1px; right: 2px; font-size: 13px; animation: hammerHit 620ms ease-in-out infinite; transform: translateZ(24px); }
.assign-badge { position: absolute; top: -6px; left: -4px; font-size: 9.5px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 3px; transform: translateZ(26px); }
.power-warn { position: absolute; bottom: -4px; right: -4px; font-size: 12px; transform: translateZ(26px); }
.liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(63,167,214,0.85), rgba(46,134,193,0.95));
  animation: liquidRise 2.6s ease-in-out infinite;
  border-radius: 0 0 6px 6px;
  transform: translateZ(15px);
}
.building.smelly::after {
  content: "";
  position: absolute; inset: -6px;
  background: radial-gradient(circle at 50% 60%, rgba(120,190,120,0.5), rgba(120,190,120,0) 70%);
  animation: steam 3.2s ease-in-out infinite;
  pointer-events: none;
}
.building.flowing .building-icon { animation: flowPulse 2.2s ease-in-out infinite; }
.building .spark { position: absolute; top: 2px; left: 2px; font-size: 12px; animation: sparkFlicker 1.1s steps(2) infinite; transform: translateZ(24px); }

.deco { position: absolute; font-size: 20px; animation: decoBob 3s ease-in-out infinite; transform: translateZ(30px); }

/* 建造预览 */
.ghost {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 3px dashed rgba(255,255,255,0.95);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  pointer-events: none;
  z-index: 900;
  transform: translateZ(10px);
}
.ghost.ok { border-color: #7BE495; background: rgba(123,228,149,0.4); }
.ghost.bad { border-color: #FF7A6B; background: rgba(255,122,107,0.4); }

/* ---------- 角色（内联 SVG，可走动） ---------- */
#char-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.character {
  position: absolute;
  width: 56px;
  height: 76px;
  pointer-events: none;
  transform-origin: 50% 88%;
}
.character.is-player { width: 62px; height: 84px; }
.char-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.35)); }
.character.facing-left .char-svg { transform: scaleX(-1); }
/* 走路：两条腿交替摆动（用 SVG group 的旋转，纯 CSS 动画） */
.character.walking .limb.leg-left { animation: limbSwing 380ms linear infinite; transform-origin: 22px 56px; }
.character.walking .limb.leg-right { animation: limbSwing 380ms linear infinite reverse; transform-origin: 34px 56px; }
.character.walking .limb.arm-left { animation: limbSwing 380ms linear infinite reverse; transform-origin: 18px 36px; }
.character.walking .limb.arm-right { animation: limbSwing 380ms linear infinite; transform-origin: 42px 36px; }
.character.walking { animation: charBob 380ms ease-in-out infinite; }
.character.acting .char-svg { animation: charCast 900ms ease-out; }
.char-name {
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  background: rgba(253,246,227,0.92);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(44,24,16,0.6);
}
.character.is-player .char-name { background: var(--gold); }
.char-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  padding: 0 5px;
  background: #C0392B;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

/* ---------- 像素画角色（需求 12） ---------- */
.character.pixel { width: 48px; height: 66px; }
.character.is-player.pixel { width: 54px; height: 72px; }
.pixel-canvas {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100%; height: auto;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.45));
}
/* 两帧交替：站立帧与走路帧 */
.pixel-canvas.walk-frame { display: none; }
.character.pixel.walking .pixel-canvas.walk-frame { display: block; }
.character.pixel.walking .pixel-canvas:not(.walk-frame) { display: none; }
.character.pixel.walking .pixel-canvas { animation: pixelStep 300ms steps(2) infinite; }
.character.pixel.facing-left .pixel-canvas { transform: translateX(-50%) scaleX(-1); }
.character.pixel.is-pirate .char-name { background: #E8B4B8; }
.pirate-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 12px;
}
/* 夜晚时角色压暗（配合昼夜系统） */
.ocean[data-phase="night"] .character.pixel .pixel-canvas { filter: drop-shadow(0 3px 2px rgba(0,0,0,0.6)) brightness(0.72); }
.ocean[data-phase="dusk"] .character.pixel .pixel-canvas { filter: drop-shadow(0 3px 2px rgba(0,0,0,0.5)) brightness(0.88) sepia(0.15); }

/* ---------- 海盗建模（需求 12） ---------- */
.pirate-visual {
  animation: pirateBob 1.6s ease-in-out infinite;
}
.pirate-visual .char-name {
  background: #8E2B2B;
  color: #FFE9C9;
  border-color: #3A1414;
}
.pirate-visual.pirate-sunk { animation: pirateSink 700ms ease-in forwards; }
.pirate-visual.pirate-retreat { animation: pirateRetreat 700ms ease-in forwards; }

/* ---------- 海面漂浮物（水里，需要走过去打捞） ---------- */
#float-layer { position: absolute; inset: 0; z-index: 4; }
.float-item {
  position: absolute;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #CDE8F2 60%, #6FB6D0);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  animation: floatBob 3.4s ease-in-out infinite;
  transition: box-shadow 160ms ease, filter 160ms ease;
}
.float-item .float-label {
  position: absolute;
  left: 50%; bottom: -16px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  padding: 0 5px;
  background: rgba(253,246,227,0.94);
  border: 2px solid var(--ink);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.float-item:hover .float-label,
.float-item.in-range .float-label { opacity: 1; }
/* 玩家靠近：高亮 + 提示可以打捞 */
.float-item.in-range {
  filter: brightness(1.15);
  box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px rgba(242,193,78,0.85), 0 0 26px rgba(242,193,78,0.9);
}
.float-item.rare {
  background: radial-gradient(circle at 35% 30%, #FFF6D6, var(--gold) 70%, #C99A1F);
  box-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(242,193,78,0.9);
  animation: floatBob 2.4s ease-in-out infinite, rareGlow 1.6s ease-in-out infinite;
}
/* 长按甩钩时的高亮 */
.float-item.hooking {
  animation: none;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 3px 3px 0 var(--ink), 0 0 0 5px rgba(242,193,78,0.9), 0 0 30px rgba(242,193,78,1);
}

/* ---------- 钩爪 ---------- */
.hook-grab {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6E2, #C9A227 70%, #8B6508);
  border: 3px solid var(--ink);
  box-shadow: 0 0 14px rgba(242,193,78,0.9);
  pointer-events: none;
  z-index: 900;
  transform: translate(-50%, -50%);
}
.hook-grab::after {
  content: "🪝";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.hook-grab.reel { opacity: 0; transition: opacity 200ms ease, transform 200ms ease; }
.float-ripple {
  position: absolute; inset: -6px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  animation: ripple 2.6s ease-out infinite;
  pointer-events: none;
}

/* ---------- 8. 底栏 ---------- */
#bottombar {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(44,24,16,0.97), rgba(44,24,16,0.88));
  border-top: 3px solid var(--ink);
}
.tool-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800;
  transition: transform 90ms ease;
}
.tool-btn:active { transform: translate(2px, 2px); box-shadow: none; background: var(--gold); }
.tool-icon { font-size: 20px; line-height: 1; }
.tool-label { font-size: 11px; }

/* ---------- 9. 侧栏 ---------- */
#side-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 18;
  width: min(320px, 78vw);
  display: flex;
  background: rgba(253,246,227,0.97);
  border-left: 3px solid var(--ink);
  transition: transform 260ms cubic-bezier(.3,1.2,.5,1);
}
#side-panel.collapsed { transform: translateX(100%); }
.side-toggle {
  position: absolute;
  left: -34px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 56px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}
.side-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.side-tabs { display: flex; border-bottom: 3px solid var(--ink); }
.side-tab {
  flex: 1;
  padding: 8px 4px;
  font-size: 12.5px;
  font-weight: 800;
  background: #F2EAE0;
  border: none;
  border-right: 2px solid rgba(44,24,16,0.25);
}
.side-tab:last-child { border-right: none; }
.side-tab.is-active { background: var(--gold); }
.side-pane { display: none; flex: 1; overflow-y: auto; padding: 10px; }
.side-pane.is-active { display: block; }

/* 幸存者卡片 */
.survivor-list { display: flex; flex-direction: column; gap: 9px; }
.survivor-card {
  padding: 8px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.survivor-card.picked { outline: 3px solid var(--gold); outline-offset: 2px; }
.survivor-head { display: flex; align-items: center; gap: 8px; }
.survivor-portrait {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.survivor-info { flex: 1; min-width: 0; }
.survivor-name { font-weight: 800; font-size: 14px; }
.survivor-prof { font-size: 11px; color: #6b5a4a; }
.survivor-mood { font-size: 12px; font-weight: 800; }
.survivor-bars { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 3px; }
.mini-bar { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.mini-label { width: 26px; color: #6b5a4a; }
.mini-track { flex: 1; height: 7px; background: rgba(44,24,16,0.15); border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.mini-track i { display: block; height: 100%; background: var(--green); transition: width 300ms ease; }
.mini-bar.hp .mini-track i { background: var(--red); }
.mini-value { width: 24px; text-align: right; }
.survivor-assign { font-size: 11px; color: #5b4a3d; }
.survivor-actions { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

/* 建筑详情 */
.detail-head { display: flex; gap: 9px; align-items: flex-start; }
.detail-icon { font-size: 30px; }
.detail-name { font-weight: 800; font-size: 15px; }
.detail-desc { font-size: 12px; color: #6b5a4a; margin-top: 2px; }
.detail-flavor { margin-top: 8px; font-size: 12.5px; font-style: italic; color: #7a5a3a; background: rgba(242,193,78,0.18); padding: 6px 8px; border-left: 4px solid var(--gold); border-radius: 4px; }
.detail-rate, .detail-power, .detail-assigned { margin-top: 7px; font-size: 12.5px; }
.detail-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* 事件日志 */
.event-log { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.log-line { display: flex; gap: 6px; padding-bottom: 4px; border-bottom: 1px dashed rgba(44,24,16,0.15); }
.log-time { color: #9a8a7a; font-variant-numeric: tabular-nums; }
.log-text { flex: 1; }

/* ---------- 10. 对话框 ---------- */
#dialogue-box {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  animation: dialogueIn 260ms cubic-bezier(.2,1.3,.4,1);
}
#dialogue-box.dialogue-out { animation: dialogueOut 200ms ease-in forwards; }
.dialogue-inner { padding: 12px 14px; max-width: 900px; margin: 0 auto; }
.dialogue-head { display: flex; align-items: center; gap: 10px; }
.portrait {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.dialogue-name { font-size: 17px; font-weight: 800; flex: 1; }
.dialogue-skip { font-size: 12px; padding: 4px 10px; min-height: 34px; background: #F2EAE0; border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }
.dialogue-text { min-height: 62px; margin: 10px 2px 6px; font-size: 15.5px; line-height: 1.75; }
.dialogue-foot { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dialogue-choices { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.choice-btn { text-align: left; justify-content: flex-start; white-space: normal; line-height: 1.5; padding: 10px 14px; }

/* ---------- 11. 打捞小游戏 ---------- */
#salvage-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,26,36,0.72);
  backdrop-filter: blur(2px);
}
#salvage-modal.hidden { display: none; }
.salvage-inner { width: min(94vw, 560px); padding: 16px; text-align: center; }
.salvage-title { font-size: 20px; }
.salvage-sub { font-size: 12.5px; color: #6b5a4a; margin: 4px 0 10px; }
.salvage-target { font-size: 40px; line-height: 1; margin-bottom: 8px; animation: floatBob 2s ease-in-out infinite; }
.salvage-bar {
  position: relative;
  height: 40px;
  margin: 0 4px 8px;
  background: repeating-linear-gradient(90deg, #E8DEC6 0 12px, #DFD3B6 12px 24px);
  border: 3px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.salvage-zone {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, #7BE495, #3FA76A);
  border-left: 2px solid rgba(44,24,16,0.6);
  border-right: 2px solid rgba(44,24,16,0.6);
  opacity: 0.92;
  display: none;
}
.salvage-zone.hit { background: linear-gradient(180deg, #FFF6D6, var(--gold)); opacity: 1; }
.salvage-pointer {
  position: absolute; top: -3px; bottom: -3px; left: 0;
  width: 6px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(192,57,43,0.9);
  transform: translateX(-50%);
}
.salvage-hits { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.salvage-result { min-height: 22px; margin-top: 8px; font-weight: 800; }
#salvage-modal.shake-ok .salvage-inner { animation: hitPop 320ms ease-out; }
#salvage-modal.shake-bad .salvage-inner { animation: missShake 360ms ease-in-out; }

/* ---------- 12. 全屏剧情画面 ---------- */
#story-screen {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 420ms ease-out;
}
#story-screen.story-out { animation: fadeOut 300ms ease-in forwards; }
.story-bg { position: absolute; inset: 0; transition: background 600ms ease; }
.bg-storm    { background: linear-gradient(170deg, #2C3E50, #4A6072 45%, #1B6B8A); }
.bg-morning  { background: linear-gradient(170deg, #FFD9A0, #F4A460 40%, #2E9BC0); }
.bg-afternoon{ background: linear-gradient(170deg, #87CEEB, #2E9BC0 55%, #1B6B8A); }
.bg-night    { background: linear-gradient(170deg, #0B1E33, #16324F 50%, #1B6B8A); }
.bg-fog      { background: linear-gradient(170deg, #C8CFD4, #8FA6B2 45%, #35606E); }
.bg-patrol   { background: linear-gradient(170deg, #F2F2F2, #A9C3D1 40%, #1B4A63); }
.bg-deep     { background: linear-gradient(170deg, #04121E, #082A3D 55%, #0B4A5C); }
.bg-finale   { background: linear-gradient(170deg, #2B1B3D, #6B3A5A 45%, #1B6B8A); }
.bg-tower    { background: linear-gradient(170deg, #D9E6EC, #8FB2C4 45%, #2C5A6B); }
.bg-battle   { background: linear-gradient(170deg, #4A1D1D, #B33A20 45%, #1B6B8A); }
.bg-uprising { background: linear-gradient(170deg, #3D2B1F, #C98B3A 45%, #2E9BC0); }
.bg-heart    { background: linear-gradient(170deg, #FFE9A8, #FFB347 40%, #4FC3F7); }
.story-content {
  position: relative;
  z-index: 2;
  width: min(90vw, 760px);
  padding: 22px;
  background: rgba(253,246,227,0.94);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 rgba(44,24,16,0.85);
  text-align: center;
}
.story-content h2 { font-size: clamp(19px, 4.6vw, 28px); margin-bottom: 12px; letter-spacing: 2px; }
#story-text { min-height: 92px; font-size: 16px; line-height: 1.9; }
#story-next { margin-top: 14px; }

/* ---------- 13. 通知（toast） ---------- */
#toast-root {
  position: fixed;
  top: 76px; right: 10px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, 74vw);
  pointer-events: none;
}
.toast {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transform: translateX(120%);
  transition: transform 320ms cubic-bezier(.2,1.3,.4,1), opacity 260ms ease;
}
.toast.in { opacity: 1; transform: translateX(0); }
.toast.out { opacity: 0; transform: translateX(30%); }
.toast-achievement { border-color: #B8860B; box-shadow: 4px 4px 0 #8B6508, 0 0 18px rgba(242,193,78,0.7); background: linear-gradient(160deg, #FFF9E4, #FFE9A8); }
.toast-icon { font-size: 20px; line-height: 1; }
.toast-body { flex: 1; }
.toast-title { font-weight: 800; }
.toast-desc { font-size: 12px; color: #6b5a4a; margin-top: 2px; }
.toast-reward { font-size: 12px; color: #8B6508; font-weight: 700; margin-top: 3px; }

/* ---------- 14. 浮动文字与粒子 ---------- */
#floating-text-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.float-text {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 4px var(--ink), 2px 2px 0 var(--ink);
  animation: floatTextUp 2s ease-out forwards;
}
.quip-bubble {
  position: absolute;
  left: 50%; bottom: 150px;
  transform: translate(-50%, 20px);
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: min(88vw, 560px);
  padding: 10px 14px;
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,1.3,.4,1);
  pointer-events: none;
}
.quip-bubble.in { opacity: 1; transform: translate(-50%, 0); }
.quip-icon { font-size: 26px; }
.quip-body { font-size: 14px; line-height: 1.6; }
.quip-name { margin-right: 4px; }

#particle-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.particle { position: absolute; font-size: 22px; pointer-events: none; }
.particle-icon { filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4)); }

.screen-flash { position: fixed; inset: 0; z-index: 88; pointer-events: none; animation: flashOut 700ms ease-out forwards; }
.flash-golden { background: radial-gradient(circle at 50% 50%, rgba(242,193,78,0.55), rgba(242,193,78,0) 70%); box-shadow: inset 0 0 80px rgba(242,193,78,0.9); }
.rainbow-flash::after {
  content: ""; position: fixed; inset: 0; z-index: 88; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,0,0,0.25), rgba(255,165,0,0.25), rgba(255,255,0,0.25), rgba(0,200,0,0.25), rgba(0,120,255,0.25), rgba(150,0,255,0.25));
  animation: flashOut 900ms ease-out forwards;
}

#damage-vignette {
  position: fixed; inset: 0; z-index: 86; pointer-events: none;
  box-shadow: inset 0 0 0 rgba(192,57,43,0);
  transition: box-shadow 300ms ease;
}
#damage-vignette.active { animation: alarmPulse 1.1s ease-in-out infinite; }

/* ---------- 15. 弹出面板 ---------- */
#modal-root { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  background: rgba(7,26,36,0.62);
  pointer-events: auto;
  animation: fadeIn 180ms ease-out;
}
.modal-panel {
  width: min(94vw, 720px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  animation: panelPop 280ms cubic-bezier(.2,1.4,.4,1);
}
.modal-panel.wide { width: min(96vw, 940px); }
.modal-panel.as-sheet { width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0; animation: sheetUp 300ms cubic-bezier(.2,1.2,.4,1); }
.panel-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
  border-radius: 9px 9px 0 0;
}
.panel-title { font-size: 18px; }
.panel-title-wrap { flex: 1; }
.panel-sub { font-size: 12.5px; color: #6b5a4a; margin-top: 2px; }
.panel-body { overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.modal-panel.as-sheet .panel-body { max-height: 62vh; }

/* 建造面板 */
.build-head-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.build-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 100ms ease;
}
.build-card:hover { transform: translateY(-2px); background: #FFF7E2; }
.build-card.disabled { filter: grayscale(0.7); opacity: 0.72; }
.build-card-icon { font-size: 24px; }
.build-card-name { font-weight: 800; font-size: 14px; }
.build-card-size { font-size: 11px; color: #6b5a4a; }
.build-card-cost { display: flex; gap: 4px; flex-wrap: wrap; }
.cost-chip { font-size: 11.5px; padding: 1px 6px; background: rgba(44,24,16,0.08); border-radius: 999px; }
.cost-chip.lack { background: rgba(192,57,43,0.22); color: var(--red); font-weight: 800; }
.build-card-desc { font-size: 11px; color: #7a6a5c; line-height: 1.5; }

/* 深海探索 */
.dive-card {
  display: flex; gap: 10px; width: 100%;
  padding: 10px; margin-bottom: 8px;
  text-align: left;
  background: linear-gradient(120deg, #E8F4F8, #CBE6EF);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.dive-card.done { filter: grayscale(0.6); }
.dive-icon { font-size: 26px; }
.dive-body { flex: 1; }
.dive-name { font-weight: 800; }
.dive-desc { font-size: 12px; color: #4a5a63; margin: 2px 0; }
.dive-cost { font-size: 11.5px; color: #2C5A6B; }

/* 任务面板 */
.quest-panel-inner .quest-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(44,24,16,0.18); font-size: 13px; }
.quest-row.done { opacity: 0.62; text-decoration: line-through; }
.quest-kind { font-size: 11px; padding: 1px 6px; background: var(--gold); border: 2px solid var(--ink); border-radius: 6px; }
.quest-text { flex: 1; }
.quest-reward { font-size: 11.5px; color: #8B6508; }

/* 昵称输入（需求 13） */
.nickname-panel { display: flex; flex-direction: column; gap: 10px; }
.nickname-input {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.nickname-input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.nickname-tips { font-size: 12px; color: #6b5a4a; }
.nickname-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nickname-row .btn { flex: 1; min-width: 140px; }

/* 一键领取（需求 11） */
.quest-bulk-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.quest-bulk-row .btn { flex: 1; min-width: 190px; }

/* 支线委托卡片 */
.contract-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px; margin-bottom: 8px;
  background: #F3EADA;
  border: 3px solid var(--ink);
  border-radius: 10px;
}
.contract-card.ready { background: linear-gradient(150deg, #FFF9E4, #FFE9A8); box-shadow: 3px 3px 0 #8B6508; }
.contract-icon { font-size: 24px; }
.contract-body { flex: 1; min-width: 0; }
.contract-name { font-weight: 800; font-size: 13.5px; }
.contract-text { font-size: 12px; color: #6b5a4a; line-height: 1.5; margin: 2px 0; }
.contract-terms { font-size: 11.5px; color: #2C5A6B; }

/* 成就面板 */
.achievement-panel { width: min(96vw, 900px); }
.achv-progress { height: 10px; margin-top: 5px; background: rgba(44,24,16,0.15); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.achv-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #FFE9A8); transition: width 400ms ease; }
.achv-tabs { display: flex; gap: 5px; padding: 8px 12px; overflow-x: auto; border-bottom: 3px solid var(--ink); background: #F7EEDC; }
.achv-tab {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
}
.achv-tab.is-active { background: var(--gold); }
.achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 8px; padding: 12px; overflow-y: auto; }
.achv-card {
  display: flex; gap: 8px;
  padding: 8px;
  background: #F3EADA;
  border: 3px solid var(--ink);
  border-radius: 10px;
  position: relative;
  filter: grayscale(0.35);
}
.achv-card.unlocked { background: linear-gradient(150deg, #FFF9E4, #FFE9A8); filter: none; box-shadow: 3px 3px 0 #8B6508; }
.achv-card.hidden-achv { background: #3A3A3A; color: #D8D8D8; }
.achv-card.hidden-achv .achv-desc { color: #BFBFBF; }
.achv-icon { font-size: 22px; }
.achv-body { flex: 1; min-width: 0; }
.achv-name { font-weight: 800; font-size: 13.5px; }
.achv-desc { font-size: 11.5px; color: #6b5a4a; line-height: 1.5; margin-top: 2px; }
.achv-reward { font-size: 11px; color: #8B6508; margin-top: 3px; }
.achv-progress-text { font-size: 11px; color: #2C5A6B; }
.achv-stamp { position: absolute; top: 4px; right: 6px; color: var(--green); font-weight: 900; font-size: 16px; }
.achv-foot { padding: 10px 12px; border-top: 3px solid var(--ink); background: #F7EEDC; font-size: 12.5px; }
.achv-foot-line { margin-bottom: 3px; }
.achv-celebrate { margin-top: 6px; font-weight: 800; color: #8B6508; }

/* 存档槽 */
.slot-row { display: flex; gap: 8px; align-items: center; padding: 9px; margin-bottom: 8px; background: var(--card); border: 3px solid var(--ink); border-radius: 10px; flex-wrap: wrap; }
.slot-row.current { background: #FFF6D6; }
.slot-info { flex: 1; min-width: 180px; }
.slot-title { font-weight: 800; }
.slot-meta { font-size: 12px; color: #6b5a4a; }
.slot-actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* 设置 */
.setting-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.setting-label { width: 84px; font-size: 13px; font-weight: 700; }
.setting-range { flex: 1; accent-color: var(--wood); }
.setting-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.setting-info { margin-top: 12px; font-size: 12px; color: #6b5a4a; line-height: 1.8; }
.debug-block { margin-top: 12px; font-size: 12.5px; }
.debug-block summary { cursor: pointer; font-weight: 800; }
.debug-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.export-area { width: 100%; height: 200px; font-size: 11px; font-family: monospace; }
.stat-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(44,24,16,0.15); font-size: 13px; }
.stat-key { width: 96px; color: #6b5a4a; }
.stat-val { flex: 1; }

/* 彩蛋面板 */
.egg-row { display: flex; gap: 10px; padding: 8px; margin-bottom: 7px; background: #F3EADA; border: 3px solid var(--ink); border-radius: 10px; }
.egg-row.found { background: linear-gradient(150deg, #FFF9E4, #FFE9A8); }
.egg-icon { font-size: 22px; }
.egg-body { flex: 1; }
.egg-name { font-weight: 800; font-size: 13.5px; }
.egg-hint { font-size: 12px; color: #6b5a4a; line-height: 1.5; margin-top: 2px; }
.choice-btn.choice-nudge { animation: missShake 420ms ease-in-out; }
.merchant-panel .trade-btn { display: block; width: 100%; margin-bottom: 7px; text-align: left; }
.help-block p { font-size: 13px; line-height: 1.75; color: #4a3a2c; }

/* 章节横幅 / 任务完成横幅 */
.chapter-banner {
  position: fixed;
  top: 14%; left: 50%;
  transform: translate(-50%, -40px);
  z-index: 92;
  width: min(90vw, 520px);
  padding: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,1.3,.4,1);
  pointer-events: none;
}
.chapter-banner.in { opacity: 1; transform: translate(-50%, 0); }
.cb-title { font-size: 19px; }
.cb-text { font-size: 13.5px; color: #5b4a3d; margin-top: 6px; line-height: 1.7; }

.quest-complete-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 93;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #FFE9A8, #F2C14E);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(44,24,16,0.35);
  font-weight: 800;
  animation: bannerDrop 420ms cubic-bezier(.2,1.4,.4,1);
}
.quest-complete-banner.out { animation: bannerUp 400ms ease-in forwards; }
.qc-icon { font-size: 18px; }
.qc-text { flex: 1; font-size: 14px; }
.qc-reward { font-size: 12px; color: #6b4a08; }

/* 结局画面 */
.ending-wrap {
  position: fixed; inset: 0;
  z-index: 95;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(255,233,168,0.96), rgba(46,155,192,0.96));
  animation: fadeIn 700ms ease-out;
  overflow-y: auto;
}
.ending-badge { font-size: 12px; letter-spacing: 8px; color: var(--ink); opacity: 0.75; }
.ending-title { font-size: clamp(22px, 6vw, 36px); text-shadow: 3px 3px 0 var(--gold); }
.ending-text { max-width: 620px; font-size: 15px; line-height: 1.9; }
.ending-stats { font-size: 13px; line-height: 1.9; background: rgba(253,246,227,0.85); border: 3px solid var(--ink); border-radius: 10px; padding: 12px 18px; box-shadow: var(--shadow); }
.ending-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* 引导层 */
#guide-layer { position: fixed; inset: 0; z-index: 64; pointer-events: none; }
/* 遮罩只做视觉压暗，绝不拦截点击 —— 全屏遮罩曾导致“点了漂浮物没反应” */
.guide-mask { position: absolute; inset: 0; background: rgba(7,26,36,0.34); pointer-events: none; }
.guide-finger { position: absolute; font-size: 34px; animation: fingerTap 1.2s ease-in-out infinite; pointer-events: none; }
.guide-tip { position: absolute; max-width: min(86vw, 320px); padding: 10px 14px; font-size: 13.5px; line-height: 1.6; pointer-events: none; }

.ocean-msg {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translate(-50%, 20px);
  z-index: 30;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(253,246,227,0.95);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms ease;
  pointer-events: none;
}
.ocean-msg.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 交互提示与按钮 ---------- */
.hint-bubble {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  z-index: 32;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(242,193,78,0.96);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  animation: popIn 180ms ease-out;
}

.interact-btn {
  position: absolute;
  right: 16px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 56px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: popIn 200ms ease-out;
}
.interact-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.interact-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 12px;
  background: rgba(255,255,255,0.85);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.interact-emoji { font-size: 19px; }

/* ---------- 虚拟摇杆 ---------- */
#joystick {
  position: absolute;
  left: 18px;
  bottom: 22px;
  z-index: 40;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.28), rgba(44,24,16,0.35));
  border: 3px solid rgba(44,24,16,0.65);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.35);
  touch-action: none;
  opacity: 0.72;
}
#joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFF6E2, #E8C86A);
  border: 3px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(44,24,16,0.6);
  transition: transform 60ms linear;
}
/* 桌面端（有精确指针）默认隐藏摇杆，键盘操作更顺手 */
@media (hover: hover) and (pointer: fine) {
  #joystick { display: none; }
  .interact-btn { right: auto; left: 50%; transform: translateX(-50%); bottom: 20px; }
}

@media (max-width: 720px) {
  #joystick { width: 104px; height: 104px; left: 12px; bottom: 16px; }
  #joystick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .interact-btn { right: 12px; bottom: 18px; min-height: 52px; padding: 7px 13px; font-size: 14px; }
  .hint-bubble { font-size: 11.5px; top: 8px; }
}

/* ---------- 16. 响应式（320px ~ 1920px） ---------- */
@media (max-width: 900px) {
  .building-name { display: none; }
  #side-panel { width: min(300px, 82vw); }
}

@media (max-width: 720px) {
  /* 顶栏折叠为两行，资源图标缩小 */
  .res-cell { font-size: 11.5px; padding: 2px 6px; }
  .res-cell .res-icon { font-size: 13px; }
  .res-cell .res-rate { display: none; }
  .chip { font-size: 11px; padding: 2px 7px; }
  .chapter-line { font-size: 11.5px; }
  #toast-root { top: auto; bottom: 84px; right: 8px; width: min(300px, 84vw); }
  .dialogue-text { font-size: 14.5px; }
  .portrait { width: 44px; height: 44px; font-size: 24px; }
  .tool-label { font-size: 10px; }
  .float-item { width: 46px; height: 46px; font-size: 21px; }
  .story-content { padding: 16px; }
  #story-text { font-size: 14.5px; line-height: 1.8; }
  .achv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .build-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .ending-stats { font-size: 12px; }
}

@media (max-width: 420px) {
  .resource-bar { gap: 4px; }
  .res-cell { padding: 2px 5px; font-size: 11px; }
  .menu-panel { padding: 18px 14px 14px; }
  .tool-btn { min-height: 48px; padding: 2px; }
  .tool-icon { font-size: 18px; }
  .achv-grid { grid-template-columns: 1fr; }
  .quest-complete-banner { font-size: 12px; padding: 8px 10px; }
}

/* 横屏矮屏：压缩上下栏高度，给木筏留空间 */
@media (max-height: 520px) and (orientation: landscape) {
  .res-cell .res-rate { display: none; }
  #quest-banner { font-size: 11.5px; padding: 3px 8px; }
  .tool-btn { min-height: 44px; }
  .tool-label { display: none; }
  .portrait { width: 40px; height: 40px; font-size: 22px; }
  .dialogue-text { min-height: 40px; }
}

@media (min-width: 1500px) {
  .building-icon { font-size: 26px; }
  .building-name { font-size: 12px; }
}