/* 通用：9:16 竖屏适配 */
:root {
  --game-ratio: 9 / 16;
  --typewriter-ms-per-char: 200; /* 0.2秒/字 = 200ms，与 game.js 一致 */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #1a1a1a;
  color: #eee;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 9:16 游戏容器：手机端铺满屏幕，电脑端居中加宽 */
.game-viewport {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* 手机地址栏收缩时也能铺满 */
  min-height: 300px;
  margin: 0;
  background: #252525;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px #333;
}

/* 手机竖屏：铺满整个屏幕，不限制为中间一条 */
@media (max-width: 767px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
  }
  .game-viewport {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* 电脑/横屏：加宽容器，内层再分「头像栏 + 主列（Banner+对白）」 */
@media (min-width: 768px) {
  body {
    align-items: center;
    justify-content: center;
  }
  .game-viewport {
    width: min(960px, 98vw);
    max-width: none;
    height: min(900px, 96vh);
    max-height: 96vh;
    margin: auto;
  }
}

@media (min-width: 1100px) {
  .game-viewport {
    width: min(1080px, 98vw);
  }
}