/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}

body {
  font-family: "Noto Sans TC", sans-serif;
  background: var(--bg-sumi);
  color: var(--shironeri);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* 背景漸層光暈 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 25% 15%,
      rgba(120, 194, 190, 0.04) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 75% 85%,
      rgba(184, 176, 216, 0.03) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}

/* 噪點紋理 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

/* 貓掌裝飾背景 */
.paw-bg {
  position: fixed;
  width: 140px;
  height: 140px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  fill: var(--seiji);
}
.paw-1 { top: 10%; left: -30px; transform: rotate(15deg); }
.paw-2 { bottom: 20%; right: -20px; transform: rotate(-25deg); opacity: 0.04; }
.paw-3 { top: 50%; left: 80%; transform: rotate(45deg) scale(0.6); opacity: 0.03; }
.paw-4 { bottom: -10px; left: 30%; transform: rotate(-10deg) scale(1.2); opacity: 0.06; }

/* 主容器 */
.app {
  width: 100%;
  height: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  animation: appFadeIn 0.6s ease-out;
}

@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}