/* =========================================================
   base.css —— 重置、设计变量、响应式画布
   ---------------------------------------------------------
   设计稿尺寸：1536 × 1024（与参考图二一致）
   --u = 设计稿中的 1px 在当前屏幕上的实际尺寸
       = min(画面宽 / 1536, 画面高 / 1024)
   --app-w / --app-h = 游戏画面宽高：正常为视口宽高；
       手机竖持时（html.force-landscape）二者互换，整个画面旋转 90° 横屏显示
   所有元素尺寸/坐标都写成 calc(N * var(--u))，整体等比缩放，
   保证在任意横屏比例下 Logo / 登录框 / 底部文字都不会被裁切。
   ========================================================= */

:root {
  --design-w: 1536;
  --design-h: 1024;
  --vh: 100vh;
  --app-w: 100vw;
  --app-h: var(--vh);
  --u: min(calc(var(--app-w) / 1536), calc(var(--app-h) / 1024));
  /* 安全区（刘海 / 灵动岛 / 圆角 / 底部横条）：游戏画面左右两侧要让开的距离。
     横屏时就是屏幕左右的安全区；竖着拿（画面转 90°）时游戏的左边是手机顶部、右边是手机底部 */
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  /* 主题色（取自素材） */
  --c-blue: #1f6fe0;
  --c-blue-dark: #0d4fb8;
  --c-blue-text: #1d5fc4;
  --c-border: #c3d5f0;
  --c-placeholder: #5d6f8c;
  --c-text: #23365a;
  --c-orange: #ffae1a;

  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}

/* 游戏字体：方正粗圆（素材包 chn_string.woff2），大厅按钮文字、对战名字等共用 */
@font-face {
  font-family: "DXBRound";
  src: url("../assets/fonts/chn_string.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* 支持动态视口单位的浏览器（移动端地址栏伸缩）用 dvh */
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #4aa3f0; /* 背景图加载前的兜底色，避免白屏 */
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}

img {
  display: block;
  max-width: none;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

ul { list-style: none; }

a { color: inherit; text-decoration: none; }

input { font: inherit; user-select: text; -webkit-user-select: text; }

:focus-visible {
  outline: calc(3 * var(--u)) solid #ffd84a;
  outline-offset: calc(2 * var(--u));
}

/* ---------------------------------------------------------
   画布结构
   .game-container   铺满整个 viewport
   .game-stage       1536×1024 设计画布，居中等比缩放（Logo、登录框、协议）
   .edge-left/right  与舞台同高，但分别贴住屏幕左/右边缘（角色、道具）
                     —— 宽屏时角色自动向两侧展开，不会挤压登录框
   --------------------------------------------------------- */
.game-container {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--app-w);
  height: var(--app-h);
  overflow: hidden;
}

/* ---------------------------------------------------------
   强制横屏：手机竖着拿时（js/core/orientation.js 给 html 加 force-landscape），
   画面宽高互换，并顺时针旋转 90° 铺满屏幕，玩家始终看到横屏画面。
   电脑浏览器不会进入此模式。
   --------------------------------------------------------- */
html.force-landscape {
  --app-w: var(--vh);
  --app-h: 100vw;
  --sa-l: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-bottom, 0px);
}

html.force-landscape .game-container {
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
}

.game-stage,
.edge {
  position: absolute;
  top: 50%;
  height: calc(var(--design-h) * var(--u));
  transform: translateY(-50%);
}

.game-stage {
  left: 50%;
  width: calc(var(--design-w) * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none; /* 舞台本身不拦截事件，子元素按需开启 */
}

.game-stage > * { pointer-events: auto; }
.game-stage > .layer-deco { pointer-events: none; }

.edge { width: 0; pointer-events: none; }
.edge-left { left: var(--sa-l); }
.edge-right { right: var(--sa-r); }

/* ---------------------------------------------------------
   层级（由低到高）
   --------------------------------------------------------- */
.layer-bg      { z-index: 1; }
.layer-chars   { z-index: 4; }
.game-stage    { z-index: 5; }   /* 内部：deco 3 → logo 5 → panel 6 → toast 20 */
.hud-top-right { z-index: 30; }
.age-tip,
.version       { z-index: 31; }

/* ---------------------------------------------------------
   轻提示 Toast（登录页、大厅共用，放在 .game-stage 内）
   --------------------------------------------------------- */
.toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(400 * var(--u));
  max-width: calc(560 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(16, 42, 92, 0.86);
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(10 * var(--u)));
  transition: opacity .25s, transform .25s;
}

.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast--success { background: rgba(22, 130, 60, 0.9); }
.toast--error { background: rgba(200, 60, 40, 0.9); }

/* 无障碍：用户要求减少动态效果时关闭所有动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}