/* ==========================================================
   《萌宠养成记》设计系统 — 粉色系主题 Design Tokens
   所有颜色、圆角、阴影、字体统一在此定义，全站复用
   ========================================================== */

:root {
  /* ---------- 主色阶：樱花粉 ---------- */
  --pink-50:  #FFF6F9;
  --pink-100: #FFE8F0;
  --pink-200: #FFD1E1;
  --pink-300: #FFB3CD;
  --pink-400: #FF90B6;
  --pink-500: #FF6B9D;   /* 品牌主色 */
  --pink-600: #F04E87;
  --pink-700: #D63872;
  --pink-800: #AB2A59;
  --pink-900: #7A1B3D;

  /* ---------- 辅助色 ---------- */
  --cream:      #FFFBF7;   /* 奶油白 - 卡片底 */
  --cream-deep: #FFF3EA;   /* 奶油深 - 分区底 */
  --mint:       #6FD9B8;   /* 薄荷绿 - 成功/体力 */
  --mint-deep:  #3FB894;
  --lemon:      #FFD166;   /* 鹅黄 - 积分/星星 */
  --lemon-deep: #F5B92E;
  --sky:        #85CFFF;   /* 天蓝 - 信息/水 */
  --sky-deep:   #4EAEEA;
  --lilac:      #C4A9FF;   /* 薰衣草 - 稀有/技能 */
  --coral:      #FF8A7A;   /* 珊瑚 - 警告/心情 */

  /* ---------- 文字色 ---------- */
  --ink:        #5C3244;   /* 主文字 - 深莓色，比纯黑柔和 */
  --ink-soft:   #8A6274;   /* 次要文字 */
  --ink-faint:  #B99CAA;   /* 提示文字 */
  --ink-white:  #FFFFFF;

  /* ---------- 状态色 ---------- */
  --success: #3FB894;
  --danger:  #FF5C5C;
  --warning: #F5B92E;

  /* ---------- 圆角 ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- 阴影（柔和粉调） ---------- */
  --sh-sm: 0 2px 6px rgba(214, 56, 114, 0.10);
  --sh-md: 0 6px 18px rgba(214, 56, 114, 0.14);
  --sh-lg: 0 12px 32px rgba(214, 56, 114, 0.18);
  --sh-inner: inset 0 2px 4px rgba(214, 56, 114, 0.10);

  /* ---------- 字体 ---------- */
  --font-main: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
               "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;

  /* ---------- 舞台设计尺寸（横屏 16:9） ---------- */
  --design-w: 1280px;
  --design-h: 720px;
}

/* ---------- 全局重置 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  color: var(--ink);
  background: #2A1520;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 16px; /* 防止 iOS 自动放大页面 */
  color: var(--ink);
}

img { display: block; -webkit-user-drag: none; }

/* ---------- 通用组件 ---------- */

/* 主按钮：粉色糖果按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--pink-500);
  color: var(--ink-white);
  box-shadow: 0 4px 0 var(--pink-700), var(--sh-md);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--pink-700), var(--sh-sm);
}
.btn:disabled {
  filter: grayscale(0.7) opacity(0.6);
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: var(--cream);
  color: var(--pink-700);
  box-shadow: 0 4px 0 var(--pink-200), var(--sh-sm);
}
.btn-ghost:active { box-shadow: 0 1px 0 var(--pink-200); }

.btn-mint  { background: var(--mint);  box-shadow: 0 4px 0 var(--mint-deep), var(--sh-md); }
.btn-lemon { background: var(--lemon-deep); box-shadow: 0 4px 0 #C79412, var(--sh-md); }

/* 卡片 */
.card {
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  border: 2px solid #FFFFFF;
}

/* 滚动区（隐藏丑陋滚动条，保留触摸滚动） */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-300) transparent;
}
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--pink-300);
  border-radius: 3px;
}
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================
   横屏舞台布局 — 通用，被启动页与儿童端共用
   stage.js 通过 transform: translate(-50%, -50%) scale() 居中缩放
   ========================================================== */

#viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #2A1520;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--design-w);
  height: var(--design-h);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
  overflow: hidden;
  background: var(--pink-50);
  box-shadow: 0 0 60px rgba(0, 0, 0, .5);
}

/* 竖屏提示遮罩 */
#rotate-tip {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: linear-gradient(160deg, #FF8FB8, #FF6B9D 60%, #E24680);
  color: #fff;
  text-align: center;
  padding: 30px;
}
#rotate-tip.show { display: flex; }

.rotate-phone {
  width: 72px;
  height: 124px;
  border: 5px solid #fff;
  border-radius: 14px;
  position: relative;
  animation: rotateHint 2.4s ease-in-out infinite;
}
.rotate-phone::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 26px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  opacity: .8;
}
@keyframes rotateHint {
  0%, 30%   { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}

#rotate-tip h2 { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
#rotate-tip p  { font-size: 15px; opacity: .9; line-height: 1.7; }
#rotate-skip {
  margin-top: 8px;
  padding: 10px 24px;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .6);
  color: #fff;
  font-size: 15px;
}
#rotate-skip:active { background: rgba(255, 255, 255, .35); }