/* ============================================================
   PandaKit · Design tokens
   ============================================================ */
:root {
  /* Colors */
  --bg: #FAF7F2;
  --bg-soft: #F4EFE5;
  --card: #FFFFFF;
  --primary: #F5C56A;
  --primary-deep: #E0AC4A;
  --primary-soft: #FBE8BB;
  --accent: #7BA098;
  --accent-soft: #D9E5E1;
  --heart: #E97B7B;
  --heart-soft: #F8D9D9;
  --text: #2B2826;
  --text-soft: #8A847E;
  --text-faint: #B8B2AB;
  --border: #EDE7DD;
  --border-strong: #DDD5C7;
  --shadow-sm: 0 2px 8px rgba(40, 34, 28, 0.04);
  --shadow-md: 0 4px 16px rgba(40, 34, 28, 0.08);
  --shadow-lg: 0 12px 32px rgba(40, 34, 28, 0.10);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Type */
  --font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-meme: "ZCOOL KuaiLe", "Inter", "Noto Sans SC", sans-serif;
  --font-bold: "ZCOOL QingKe HuangYou", "Inter", "Noto Sans SC", sans-serif;
  --font-brush: "Ma Shan Zheng", "Caveat", cursive;
  --font-hand: "Liu Jian Mao Cao", "Long Cang", "Caveat", cursive;
  --font-grass: "Long Cang", "Caveat", cursive;

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; }

/* 防移动端水平拖动：根级锁横向滚 + 限定 viewport 内（双保险） */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

button { font-family: inherit; }

/* Hide native scrollbars on the page; we keep custom ones for inner rails */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Custom thin horizontal rail（仅横向，纵向隐藏，避免姿势/表情 rail 的多余 scrollbar） */
.pk-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.pk-rail::-webkit-scrollbar { height: 6px; width: 0; }
.pk-rail::-webkit-scrollbar-track { background: transparent; }
.pk-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.pk-rail:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
.pk-rail::-webkit-scrollbar:vertical { display: none; width: 0; }

/* No-scrollbar container */
.pk-noscroll { scrollbar-width: none; }
.pk-noscroll::-webkit-scrollbar { display: none; }

/* ============================================================
   Touch device (no hover) — 关 hover Tooltip（移动 tap 后 mouseEnter 触发但无 leave）
   ============================================================ */
@media (hover: none) {
  .pk-tooltip { display: none !important; }
  /* button hover transform 也不要（tap 后卡 hover state） */
  button:hover { transform: none !important; }
}

/* desktop / mobile lang button 二选一 */
.pk-lang-mobile { display: none; }

/* ============================================================
   Mobile (≤720px) — logo 仅图 / nav 居中 / lang 圆圈 / 紧凑布局
   ============================================================ */
@media (max-width: 720px) {
  /* TopNav 紧凑 */
  header.pk-glass {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  /* logo 整个 text div 隐藏，只留图标；让位给中间 Tabs 真正居中 */
  header.pk-glass > a {
    min-width: auto !important;
  }
  .pk-brand-text { display: none !important; }
  /* lang container 让位 */
  header.pk-glass > div:last-child {
    min-width: auto !important;
  }
  /* lang 切换 mobile 缩尺寸（保持中/EN 双段样式，不改成圆圈） */
  .pk-lang-toggle {
    height: 28px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  /* nav tab gap 减小 */
  header.pk-glass > div:nth-child(2) > div {
    gap: 14px !important;
  }
  /* 主内容区 padding 减少 */
  main {
    padding: 20px 14px 40px !important;
  }
  /* 卡片 padding 减少 */
  .pk-card {
    padding: 16px !important;
  }
  /* 预览块 padding */
  .pk-card[style*="padding: 28px"] {
    padding: 16px !important;
  }
  /* 预览 wrapper 360x360 → 自适应 */
  main .pk-card > div[style*="width: 360px"] {
    width: calc(100vw - 64px) !important;
    height: calc(100vw - 64px) !important;
    max-width: 360px;
    max-height: 360px;
  }
  /* hero h1 缩小 */
  main h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  /* SectionHeader 标题缩小 */
  main h2 {
    font-size: 18px !important;
  }
  /* button 在小屏堆叠 */
  main .pk-card > div[style*="display: flex"][style*="gap: 10px"] {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Saved/Collection: action bar 浮在底部时不撑超屏宽 */
  div[style*="position: fixed"][style*="bottom: 24px"] {
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
  }
  /* Collection grid mobile：一行 2 个 polaroid */
  .pk-polaroid-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 12px !important;
  }
  .pk-polaroid-grid > * {
    width: 100% !important;
    max-width: 160px;
  }
  /* Story timeline columns 调整 */
  div[style*="grid-template-columns: 1fr 56px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Story 内 image 不超宽 */
  main img { max-width: 100%; height: auto; }
  /* SectionFooterNav: 防按钮文字过长溢出 */
  main + footer, main > div:last-child button {
    font-size: 12px !important;
  }
  /* KbdTip 在小屏隐藏 (手机用户没键盘) — 用 className 比 attribute selector 准 */
  .pk-kbd-tip { display: none !important; }
  /* TraitRail mobile：增大 touch target，禁横滚传染 */
  .pk-rail {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* RotationDot 拖动条 mobile 加宽（更易触摸） */
  .pk-rotation-track {
    width: 240px !important;
  }
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes pk-fade-up {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pk-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pk-slide-in-right {
  0% { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes pk-slide-in-left {
  0% { opacity: 0; transform: translateX(-24px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes pk-slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pk-heart-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes pk-particle {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}
@keyframes pk-spin { to { transform: rotate(360deg); } }
@keyframes pk-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
@keyframes pk-toast-in {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes pk-pop-in {
  0% { opacity: 0; transform: scale(0.85) translateY(6px); }
  60% { transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pk-bar-in {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pk-reveal-up {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pk-stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  60% { transform: rotate(-7deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* ============================================================
   Utility primitives (kept tiny — not a full Tailwind)
   ============================================================ */
.pk-glass {
  background: rgba(250, 247, 242, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.pk-card {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.pk-skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 0%, #F8F4EC 50%, var(--bg-soft) 100%);
  background-size: 200px 100%;
  animation: pk-shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

.pk-focus-ring:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Selection */
::selection { background: var(--primary-soft); color: var(--text); }

/* Reveal-on-scroll util — opacity + translate via IntersectionObserver */
.pk-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.pk-reveal.is-in { opacity: 1; transform: translateY(0); }

/* Float pulses for hero tiles */
.pk-float { animation: pk-float 4.5s ease-in-out infinite; }
.pk-float-2 { animation: pk-float 5.2s ease-in-out infinite; animation-delay: -1.2s; }
.pk-float-3 { animation: pk-float 6.0s ease-in-out infinite; animation-delay: -2.6s; }

/* Headings — softer letter spacing */
h1, h2, h3, h4 { letter-spacing: -0.01em; }