:root{
  --ink:#2a1f1f;
  --gold:#ffcc66;
  --card: rgba(255,255,255,.88);
  --shadow: 0 16px 50px rgba(0,0,0,.18);
}

*{ box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; font-family: system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); }

#c{
  width:100vw; height:100vh; display:block;
  background: linear-gradient(180deg,#fff1f1,#fff8f2);
  touch-action: none;          /* 禁止浏览器手势干扰 pointer 事件 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 通用屏幕层 */
.screen{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-rows: 1fr auto 1fr;
  align-items:center;
  justify-items:center;
  padding: env(safe-area-inset-top, 0) 18px env(safe-area-inset-bottom, 0);
  z-index: 20;
}

/* 喜庆首页背景 */
.home{
  background: url("assets/bg.jpg") center/cover no-repeat;
}

.home-top{ text-align:center; z-index:1; }

.badge{
  display:inline-block;
  padding: clamp(6px, 1.8vw, 8px) clamp(10px, 3vw, 12px);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
  font-size: clamp(11px, 3.2vw, 14px);
}

.title{
  margin: 0;
  font-size: clamp(22px, 8.5vw, 36px);
  line-height: 1.1;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.subtitle{
  margin: 10px 0 0;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  opacity: .95;
  font-size: clamp(12px, 4.2vw, 16px);
}

/* 核心修改：游戏入口按钮（接红包+大西瓜） */
/* 核心修改：游戏入口按钮（接红包+大西瓜）- 统一金色系 */
#enterRed, #enterMerge {
  z-index:1;
  border: none;
  border-radius: 999px;
  width: min(78vw, 300px);
  padding: clamp(12px, 3.6vw, 14px) clamp(16px, 5vw, 22px);
  margin: 8px 0; /* 两个按钮之间的间距 */
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 1000;
  cursor: pointer;
  transition: transform .08s ease;
  touch-action: manipulation;
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
  /* 统一文字色：和原 btn-primary 一致的深红色，对比更清晰 */
  color: #7a1a1a;
}

/* 接红包按钮：浅金→深金渐变（主色 #ffcc66） */
#enterRed {
  background: linear-gradient(180deg, #ffe8a6, #ffcc66);
}

/* 大西瓜按钮：稍深的金渐变（仍以 #ffcc66 为核心，区分但统一） */
#enterMerge {
  background: linear-gradient(180deg, #ffcc66, #e6b850);
  margin-top: -200px; /* 核心：往上移8px，数值越大移得越多，比如-12px */
}
/* 按钮按下动效（和原样式一致） */
#enterRed:active, #enterMerge:active {
  transform: translateY(1px) scale(.99);
}
/* 原 btn-primary 样式保留（防止其他地方用到） */
.btn-primary{
  z-index:1;
  border: none;
  border-radius: 999px;
  width: min(78vw, 300px);
  padding: clamp(12px, 3.6vw, 14px) clamp(16px, 5vw, 22px);
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 1000;
  color: #7a1a1a;
  background: linear-gradient(180deg, #ffe8a6, #ffcc66);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .08s ease;
  touch-action: manipulation;
}
.btn-primary:active{ transform: translateY(1px) scale(.99); }

.home-bottom{ z-index:1; }
.hint{
  width: min(86vw, 420px);
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  backdrop-filter: blur(10px);
}

/* HUD */
.hud{
  position:fixed;
  top: env(safe-area-inset-top, 0);
  left:0; right:0;
  padding: 10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
  z-index: 10;
}
.pill{
  pointer-events:auto;
  padding: 10px 12px;
  border-radius:999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight:900;
  font-size: clamp(12px, 3.6vw, 14px);
}
.hidden{ display:none !important; }