/* =============================================================
   2048 · 首页系统（简约大气版）
   温暖米色底 + 疏落圆点点缀 · 留白克制
   全部尺寸用 clamp()/vw/vh 流式，PC 与移动端自适应
   ============================================================= */

:root {
  --bg:         #F5F0E6;   /* 暖米色底 */
  --ink:        #3A322B;   /* 深暖棕主字 */
  --sub:        #8D8377;   /* 次级按钮 / 次要字 */
  --gold:       #C99A4A;   /* 克制暖金点缀 */
  --dot:        rgba(90, 76, 60, 0.10);   /* 圆点 */
  --dot-soft:   rgba(90, 76, 60, 0.06);
  --card:       #FFFFFF;   /* 按钮/卡片面 */
  --shadow-sm:  0 1px 2px rgba(90, 76, 60, 0.06), 0 10px 26px rgba(90, 76, 60, 0.08);
  --shadow-card: 0 1px 2px rgba(90, 76, 60, 0.06), 0 24px 60px rgba(90, 76, 60, 0.18);

  --ease:       cubic-bezier(0.34, 1.1, 0.64, 1);
  --slide-t:    300ms;
  --slide-e:    ease-in-out;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ===== 简约圆点背景 ===== */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, var(--dot) 1px, transparent 1.6px);
  background-size: clamp(22px, 5vw, 36px) clamp(22px, 5vw, 36px);
  position: relative;
}

/* =====================================================
   底部版本号
   ===================================================== */
.app-foot {
  position: fixed; z-index: 20; left: 0; right: 0;
  bottom: max(12px, 2.5vh);
  text-align: center; font-size: 11px; color: var(--sub);
  letter-spacing: 2px; font-weight: 500; opacity: 0.7;
}

/* =====================================================
   应用主容器 + 三视图切换
   ===================================================== */
.app {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
}

.view {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  visibility: hidden;
  will-change: transform, opacity;
}
.view.is-active { opacity: 1; pointer-events: auto; visibility: visible; }

/* 进入方向：从右 */
.view.is-entering-right { animation: enterRight var(--slide-t) var(--slide-e) both; }
.view.is-leaving-right  { animation: leaveLeft var(--slide-t) var(--slide-e) both; }
/* 返回方向：从左 */
.view.is-entering-left  { animation: enterLeft  var(--slide-t) var(--slide-e) both; }
.view.is-leaving-left   { animation: leaveRight var(--slide-t) var(--slide-e) both; }

@keyframes leaveLeft  { to { transform: translateX(-100%); opacity: 0.4; } }
@keyframes enterRight { from { transform: translateX( 100%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
@keyframes leaveRight { to { transform: translateX( 100%); opacity: 0.4; } }
@keyframes enterLeft  { from { transform: translateX(-100%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

.stage {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(14px, 4vw, 32px) 60px;
  gap: clamp(40px, 9vh, 84px);
}

/* =====================================================
   品牌 Logo：净面大字 "2048"
   ===================================================== */
.brand {
  display: flex; flex-direction: column; align-items: center;
  animation: brand-in 0.8s var(--ease) both;
}
@keyframes brand-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: none; } }

.logo-2048 {
  margin: 0;
  font-size: clamp(58px, 19vw, 148px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: clamp(1px, 0.5vw, 4px);
  color: var(--ink);
}
/* 金色高亮 "+" 徽标，更醒目 */
.logo-2048 .logo-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.64em; height: 0.64em;
  background: linear-gradient(180deg, #E3B365, var(--gold));
  color: #fff;
  border-radius: 0.16em;
  font-size: 0.6em; font-weight: 800; line-height: 1;
  margin-left: 0.16em;
  vertical-align: 0.18em;
  box-shadow: 0 3px 12px rgba(201, 154, 74, 0.42);
}

/* 底部细金线，更显大气收束 */
.logo-2048 { position: relative; }
.logo-2048::before {
  content: "";
  position: absolute;
  left: 50%; bottom: clamp(-16px, -2vw, -24px); transform: translateX(-50%);
  width: clamp(56px, 22%, 120px); height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* 副标题：2048 PLUS */
.logo-sub {
  margin: clamp(22px, 4vh, 34px) 0 0;
  font-size: clamp(11px, 3vw, 14px);
  font-weight: 700;
  letter-spacing: clamp(3px, 1.6vw, 8px);
  color: var(--sub);
  text-indent: clamp(3px, 1.6vw, 8px); /* 抵消末位字距，保持视觉居中 */
}

/* =====================================================
   模式选择页：当前模式 chip
   ===================================================== */
.mode-chip {
  margin: clamp(-18px, -3vh, -12px) 0 clamp(30px, 7vh, 56px);
  padding: 7px 22px;
  font-size: clamp(13px, 3.6vw, 15px); font-weight: 700; letter-spacing: 3px;
  color: var(--gold);
  background: rgba(201, 154, 74, 0.12);
  border: 1px solid rgba(201, 154, 74, 0.35);
  border-radius: 999px;
  animation: chip-in 0.5s var(--ease) both;
}
@keyframes chip-in { from { opacity: 0; transform: translateY(-8px); } }

/* =====================================================
   按钮栈（主按钮 + 次要按钮）
   ===================================================== */
.btn-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3.4vh, 26px);
  width: 100%;
}

/* 简约按钮：白底 + 柔和投影，克制的按压反馈 */
.btn-3d {
  position: relative;
  width: min(72vw, 380px);
  height: clamp(52px, 8.5vh, 66px);
  border: 0;
  border-radius: clamp(12px, 3vw, 18px);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 700;
  letter-spacing: clamp(1px, 1vw, 4px);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.15s ease,
    box-shadow 0.25s ease,
    color 0.2s ease,
    background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(90, 76, 60, 0.08), 0 16px 34px rgba(90, 76, 60, 0.12);
}
.btn-3d:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(90, 76, 60, 0.08), 0 6px 14px rgba(90, 76, 60, 0.06);
}

/* 返回菜单 / 返回 次要按钮 */
.btn-3d-muted {
  color: var(--sub);
  background: rgba(255, 255, 255, 0.55);
}

/* 禁用态：无存档时继续游戏 */
.btn-3d.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  color: #B9B2A9;
}

/* 进入 stagger：按钮从下向上依次淡入（子菜单用） */
.view.is-entering-right .btn-stack .btn-3d,
.view.is-entering-left  .btn-stack .btn-3d {
  animation: btn-rise 0.45s var(--ease) both;
}
.view .btn-stack .btn-3d:nth-child(1) { animation-delay: 0.00s; }
.view .btn-stack .btn-3d:nth-child(2) { animation-delay: 0.10s; }
.view .btn-stack .btn-3d:nth-child(3) { animation-delay: 0.20s; }
.view .btn-stack .btn-3d:nth-child(4) { animation-delay: 0.30s; }
.view .btn-stack .btn-3d:nth-child(5) { animation-delay: 0.40s; }
.view .btn-stack .btn-3d:nth-child(6) { animation-delay: 0.50s; }
.view .btn-stack .btn-3d:nth-child(7) { animation-delay: 0.60s; }

@keyframes btn-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* hover 效果在 rise 结束后才覆盖 */
.view.is-entering-right .btn-stack .btn-3d:hover,
.view.is-entering-left  .btn-stack .btn-3d:hover,
.view.is-entering-right .btn-stack .btn-3d:active,
.view.is-entering-left  .btn-stack .btn-3d:active {
  animation: none;
}

/* =====================================================
   涟漪 ripple（柔和深色）
   ===================================================== */
.btn-3d .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(90, 76, 60, 0.16);
  animation: ripple-anim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* =====================================================
   确认框 modal
   ===================================================== */
.modal {
  position: fixed; z-index: 50; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 28px);
}
.modal.is-open { display: flex; animation: modal-fade 0.25s ease both; }
@keyframes modal-fade { from { opacity: 0; } }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(90, 76, 60, 0.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  width: 100%; max-width: 360px;
  background: var(--card);
  border-radius: clamp(16px, 4vw, 22px);
  padding: clamp(24px, 6vw, 32px) clamp(20px, 5vw, 28px);
  text-align: center;
  box-shadow: var(--shadow-card);
  animation: modal-rise 0.35s var(--ease) both;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
}
.modal-title {
  margin: 0 0 10px;
  font-size: clamp(20px, 5vw, 24px); font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
}
.modal-text {
  margin: 0 0 22px;
  font-size: clamp(13px, 3.6vw, 14px); line-height: 1.8; color: var(--sub);
}
.modal-actions { display: flex; flex-direction: column; gap: clamp(12px, 3vh, 16px); align-items: center; }
.modal-actions .btn-3d {
  width: 100%; max-width: 280px; height: clamp(48px, 7vh, 56px); font-size: clamp(15px, 4vw, 17px);
}
.modal-cancel {
  background: #EFE9DC;
}