/* ---------- 设计变量 ---------- */
@font-face {
  font-family: 'SourceHanSans';
  src: url('../assets/fonts/banana-hand.woff2') format('woff2');
  font-weight: 400 900;
  font-display: block;
}

:root {
  color-scheme: only light;
  --ink: #3a2a1e;
  --ink-soft: #5b544c;
  --paper: #e9dcc3;
  --paper-2: #d8c7a6;
  --paper-3: #d6cfbf;
  --white: #f3e8d2;
  --sun: #e8c26a;
  --sun-deep: #f5c842;
  --leaf: #6fae4a;
  --leaf-dark: #4d8a33;
  --grass: #9aa86a;
  --grass-dark: #7b8a50;
  --sky: #cdbf9c;
  --sky-2: #e2d6b8;
  --dirt: #a67c55;
  --dirt-dark: #7b5534;
  --wood: #b08458;
  --wood-dark: #8b5e3c;
  --wall: #f7e2b8;
  --red: #e0533f;
  --red-soft: #ffb3a6;
  --blue: #7fb6e0;
  --gray: #b9b2a5;
  --backdrop: #4a3a2a;
  --scrim: rgba(28, 24, 20, 0.6);
  --board: #93693f;
  --floor-a: #eadfc6;
  --floor-b: #dccfb0;
  --shop-bg: #c4ad85;

  --font: 'SourceHanSans', 'Source Han Sans SC', 'Noto Sans SC', sans-serif;

  /* 层级：内容 < 吸附栏 < 悬浮 < 拿着的东西 < 提示 < 弹窗 < 教程 < 测试面板 */
  --z-content: 1;
  --z-bar: 10;
  --z-float: 20;
  --z-held: 30;
  --z-toast: 40;
  --z-modal: 50;
  --z-tutorial: 60;
  --z-cheat: 70;
}

/* 尺寸都按 --u（画面宽度的 1%）缩放，--u 由 js/ui/layout.js 写入 */
.stage {
  --u: 4px;
  --line: max(2px, calc(var(--u) * 0.65));
  --gap-xs: calc(var(--u) * 1);
  --gap-s: calc(var(--u) * 2);
  --gap-m: calc(var(--u) * 3);
  --gap-l: calc(var(--u) * 5);
  --fs-xs: calc(var(--u) * 3);
  --fs-s: calc(var(--u) * 3.6);
  --fs-m: calc(var(--u) * 4.4);
  --fs-l: calc(var(--u) * 5.6);
  --fs-xl: calc(var(--u) * 8);
  --r-s: calc(var(--u) * 2.2) calc(var(--u) * 2.8) calc(var(--u) * 2) calc(var(--u) * 3) / calc(var(--u) * 2.8) calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2.2);
  --r-m: calc(var(--u) * 3.6) calc(var(--u) * 4.6) calc(var(--u) * 3.2) calc(var(--u) * 5) / calc(var(--u) * 4.4) calc(var(--u) * 3.2) calc(var(--u) * 5) calc(var(--u) * 3.6);
  --shadow: none;
  --shadow-s: none;
  --touch: max(44px, calc(var(--u) * 11));
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--u) * 3));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--u) * 3));
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--backdrop);
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

input,
textarea,
[contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--line) dashed var(--leaf-dark);
  outline-offset: 2px;
}

svg.spr {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 224, 138, 0.08) 0 12%, transparent 13%) 0 0 / 120px 120px,
    var(--backdrop);
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-size: var(--fs-m);
  line-height: 1.5;
  touch-action: manipulation;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: var(--safe-top) var(--gap-m) var(--safe-bottom);
}

.screen.is-active {
  display: flex;
}

.hidden {
  visibility: hidden;
}