/* ==========================================
   奇观盲盒环游记 — 共享样式表
   探险绘本风 / 暖色调 / 圆角卡片
   ========================================== */

/* ---------- CSS 自定义属性（主题色） ---------- */
:root {
  --color-primary: #b8863a;       /* 主金色 */
  --color-primary-dark: #8a6528;  /* 深金 */
  --color-primary-light: #d4a373; /* 浅金 */
  --color-accent: #f5d742;        /* 亮黄强调 */
  --color-accent-dark: #dba632;   /* 深黄 */
  --color-green: #6abf69;         /* 签到绿 */
  --color-green-dark: #3f9e4a;    /* 深绿 */
  --color-bg: #fcf8ef;            /* 米白背景 */
  --color-bg-dark: #f2ead9;       /* 深米白 */
  --color-card: #f5ead6;          /* 卡片底色 */
  --color-text: #4d3a1f;          /* 深棕文字 */
  --color-text-light: #8b7a5c;    /* 浅棕文字 */
  --color-border: #dac29c;        /* 边框色 */
  --color-shadow: rgba(100, 70, 30, 0.25);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-round: 999px;
  --font-stack: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-stack);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--color-text);
  line-height: 1.5;
}

/* ---------- App 容器 ---------- */
.app {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, #e8f0fe 0%, #d4e4f7 40%, #c2d4ed 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px var(--color-shadow);
  overflow: hidden;
  position: relative;
  padding: 20px 16px 70px;
  min-height: 600px;
}

/* ---------- 渐变标题 ---------- */
.gradient-title {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ---------- 页面切换 ---------- */
.page {
  display: none;
  animation: fadeIn .35s ease;
}
.page.active {
  display: block;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- 导航栏 ---------- */
.nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(255, 248, 235, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid var(--color-border);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 12px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-light);
  transition: all 0.2s;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  user-select: none;
}

.nav-item .ico {
  font-size: 24px;
  display: block;
  margin-bottom: 3px;
}

.nav-item.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: rgba(255, 215, 140, 0.15);
}

.nav-item:active {
  background: rgba(255, 215, 140, 0.3);
}

/* ---------- 通用卡片 ---------- */
.card {
  background: linear-gradient(145deg, var(--color-card), #e6d5b6);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: 0 4px 16px var(--color-shadow);
  border: 1px solid var(--color-border);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:active {
  transform: scale(0.97);
}

/* ---------- 金色按钮 ---------- */
.btn-gold {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border: none;
  padding: 14px 48px;
  border-radius: var(--radius-round);
  font-size: 20px;
  font-weight: 700;
  color: #3d2b13;
  box-shadow: 0 6px 0 #b07d2e, 0 8px 20px rgba(180, 120, 30, 0.3);
  cursor: pointer;
  transition: all 0.1s;
  width: fit-content;
  user-select: none;
}

.btn-gold:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #b07d2e;
}

.btn-gold:disabled {
  opacity: 0.5;
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b07d2e;
  pointer-events: none;
}

/* ---------- 绿色按钮（签到） ---------- */
.btn-green {
  background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
  border: none;
  padding: 16px 48px;
  border-radius: var(--radius-round);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 6px 0 #2a7a32, 0 8px 24px rgba(60, 160, 60, 0.3);
  cursor: pointer;
  transition: all 0.1s;
  user-select: none;
}

.btn-green:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #2a7a32;
}

.btn-green.done {
  background: #b0a88c;
  box-shadow: 0 4px 0 #7a705a;
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(40, 25, 10, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99;
  padding: 20px;
}

.modal.show {
  display: flex;
}

.modal-card {
  background: linear-gradient(145deg, #fcf3e0, #efe0c7);
  border-radius: 32px;
  max-width: 360px;
  width: 100%;
  padding: 28px 24px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
  text-align: center;
  border: 2px solid var(--color-border);
  animation: modalPop .3s ease;
}

@keyframes modalPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-card .close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 28px;
  color: var(--color-text-light);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  transition: transform 0.2s;
}

.modal-card .close-btn:hover {
  transform: rotate(90deg);
}

/* ---------- Toast 轻提示 ---------- */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: #3d2b13;
  color: var(--color-accent);
  padding: 12px 28px;
  border-radius: var(--radius-round);
  font-size: 16px;
  font-weight: 600;
  z-index: 999;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 90%;
  text-align: center;
  pointer-events: none;
}

/* ---------- 装饰元素 ---------- */
.deco-star {
  position: absolute;
  font-size: 20px;
  opacity: 0.3;
  animation: floatStar 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatStar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(180deg); }
}

/* ---------- 响应式 ---------- */
@media (max-width: 440px) {
  .app {
    border-radius: 24px;
    padding: 16px 12px 64px;
    min-height: 100vh;
  }
  .nav-item {
    font-size: 12px;
    padding: 10px 0 8px;
  }
  .nav-item .ico {
    font-size: 20px;
  }
}

/* ---------- 工具类 ---------- */
.text-center { text-align: center; }
.text-brown { color: var(--color-text); }
.text-light { color: var(--color-text-light); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.flex-center { display: flex; align-items: center; justify-content: center; }