/* ===== 开心消消乐 - base.css: 变量 / reset / 通用组件 ===== */
:root {
  --pink: #ff8fb1;
  --pink-deep: #ff6f9c;
  --yellow: #ffd93d;
  --blue: #6ec6ff;
  --blue-deep: #3aa8f5;
  --green: #7fd97f;
  --bg-grad: linear-gradient(160deg, #aee6ff 0%, #ffe9a8 100%);
  --card-bg: #ffffff;
  --text: #5a3a4a;
  --text-soft: #9a7a8a;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 8px 24px rgba(255, 143, 177, 0.25);
  --shadow-card: 0 6px 16px rgba(90, 58, 74, 0.15);
  --cell: 56px;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: var(--text);
  background: var(--bg-grad);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 通用卡片 */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

/* 通用按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  border-radius: var(--radius-md);
  padding: 14px 28px;
  box-shadow: 0 5px 0 var(--pink-deep);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pink-deep); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-yellow { background: var(--yellow); color: var(--text); box-shadow: 0 5px 0 #e0b52a; }
.btn-yellow:active { box-shadow: 0 1px 0 #e0b52a; }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-deep); }
.btn-blue:active { box-shadow: 0 1px 0 var(--blue-deep); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 5px 0 #5bb85b; }
.btn-green:active { box-shadow: 0 1px 0 #5bb85b; }
.btn-ghost { background: #fff; color: var(--text); box-shadow: 0 5px 0 #e2d3da; }
.btn-ghost:active { box-shadow: 0 1px 0 #e2d3da; }

/* 标题 */
.game-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pink-deep);
  text-shadow: 0 3px 0 #fff, 0 6px 12px rgba(255, 143, 177, 0.4);
  letter-spacing: 4px;
}

/* 顶部小标签 */
.tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* 动画 */
@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}