/*
  页面居中显示 1536×1024 的游戏区域；
  四周留深蓝背景是设计选择（可当「留白」）。
*/
html, body {
  margin: 0;
  min-height: 100vh;        /* 铺满视口高度 */
  width: 100%;              /* Flex 占满宽 */
  display: flex;            /* 居中容器 */
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  background: #0e1b48;      /* 深蓝背景（你可替换） */
  touch-action: none;       /* 允许捕获触控拖动 */
}

/* 固定游戏区域尺寸（与画布一致）。
   对话气泡会相对它进行绝对定位。 */
.game-wrap {
  width: 1536px;
  height: 1024px;
  position: relative;
}

/* 画布本身无需额外样式；display:block 去掉默认空隙。 */
#game { display: block; }

/* 对话气泡（HTML div 叠加在最上层）。 */
.bubble {
  position: absolute;
  padding: 3px 7px;
  font-size: 18px;                 /* 你可根据设备再调 */
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 6px;
  pointer-events: none;            /* 不影响点击浪 */
  animation: fade 2.5s ease-out forwards;  /* 普通气泡：淡出 */
}

/* 惊慌专用：向上漂浮并淡出（用在海浪触发瞬间的少量小人）。 */
.bubble.float { animation: float 2.5s ease-out forwards; }

@keyframes fade  { 0% {opacity:1} 100% {opacity:0} }
@keyframes float { 0% {opacity:1; transform:translateY(0)} 100% {opacity:0; transform:translateY(-24px)} }

/* 为适应各种大小的屏幕 */
.game-wrap {
  transform-origin: center center; /* 以中心缩放，保持居中 */
}