html {
  /* Desktop-first: keep root font stable on large screens.
     Mobile: allow slight scaling so H5 looks consistent across small widths. */
  font-size: 16px;
}

/* Consistent box sizing prevents overflow on small screens. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent horizontal page "drift" on mobile caused by wide elements. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prefer vertical scrolling gestures (avoid accidental sideways pan). */
body {
  touch-action: pan-y;
}

/* Avoid content being clipped by iOS safe areas. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Fixed bottom nav bars should respect safe-area left/right too. */
.bottomNav,
.nav {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Make media and long content fit small screens. */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Home-style theme (shared across pages). */
.themeHome {
  background: #151b26;
  color: #f8f9fa;
  position: relative;
  overflow: hidden;
}
.themeHome > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 420px) {
  html {
    font-size: calc(100vw / 375 * 16);
  }
}

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-h: 64px;
  --bottom-gap: 12px;
  --bottom-pad: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--bottom-gap));

  /* Desktop "mobile shell" width */
  --shell-max: 520px;
  --shell-w: min(100vw, var(--shell-max));
  --shell-gutter: calc((100vw - var(--shell-w)) / 2);
}

body {
  padding-bottom: env(safe-area-inset-bottom);
  background: #000;
  font-family: "Noto Sans CJK SC", "Noto Sans CJK", "Noto Sans SC", "PingFang TC", "PingFang SC",
    "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (min-width: 768px) {
  #app {
    width: var(--shell-w);
    margin: 0 auto;
    min-height: 100vh;
  }
}