/* base.css — 复位、纸面、手机外框、滚动 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: #2c2823;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  /* 桌面演示：深色背景衬出手机 */
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
button { font-family: inherit; color: inherit; border: none; background: none; cursor: pointer; padding: 0; }
input, textarea { font-family: inherit; color: inherit; background: none; border: none; outline: none; }
::selection { background: rgba(154,43,31,.14); }

/* 宣纸纹理：极淡噪点 + 暖色不匀 */
.paper-texture {
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 30% 8%, rgba(255,252,242,.55), transparent 60%),
    radial-gradient(120% 100% at 80% 100%, rgba(150,130,90,.10), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
}

/* 手机外框（桌面演示用；窄屏自动铺满） */
#app {
  position: relative;
  width: 393px; height: 852px;
  max-height: 100vh;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 11px #15120e, 0 0 0 13px #2a2620;
}
.phone-stage {
  position: absolute; inset: 0;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.screen::-webkit-scrollbar { width: 0; height: 0; }

/* 状态栏占位（刘海下方安全区） */
.safe-top { height: 16px; flex: none; }
.safe-bottom { height: 18px; flex: none; }

@media (max-width: 460px) {
  body { background: var(--paper); }
  #app { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
}

/* 落墨转场遮罩 */
.ink-splash-mask {
  position: absolute; left: 50%; top: 58%;
  width: 120%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #1d1a15 0%, #2a2620 55%, rgba(42,38,32,.0) 72%);
  z-index: 50; pointer-events: none;
}