/* ============================================================
   base.css — 重置、排版、按钮、通用动效
   ============================================================ */

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

/* 必须放在最前面：.veil/.btn 等都显式设了 display，
   会盖掉浏览器默认的 [hidden]{display:none}，导致遮罩关不掉。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background:
    radial-gradient(1100px 520px at 12% -8%, #ffe3e3 0%, transparent 60%),
    radial-gradient(900px 480px at 92% 4%, #e0f2fe 0%, transparent 58%),
    radial-gradient(800px 520px at 60% 108%, #fef3c7 0%, transparent 60%),
    var(--c-bg);
  background-attachment: fixed;
  overflow-x: hidden;              /* 绝不出现横向滚动条 */
  overscroll-behavior-y: contain;  /* 杀掉下拉刷新/橡皮筋，游戏中不误触 */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--c-sky);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 顶栏 ─────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + var(--sa-t));
  padding: var(--sa-t) calc(16px + var(--sa-r)) 0 calc(16px + var(--sa-l));
  background: rgba(255, 248, 241, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.4)); }
.brand-name { font-size: 18px; }
.brand-name::after { content: ""; }

/* ── 按钮 ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;               /* 触控命中区下限 */
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) linear;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(0.955); }

.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  box-shadow: 0 6px 18px rgba(255, 107, 107, 0.38);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn-ghost {
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.btn-ghost:hover { border-color: rgba(31, 41, 55, 0.2); transform: translateY(-1px); }

.btn-big { min-height: 56px; padding: 14px 34px; font-size: 18px; }
.btn-sm { min-height: 38px; padding: 7px 16px; font-size: 14px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  font-size: 19px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-pop), background var(--t-fast) linear;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.off { background: #f3f4f6; opacity: 0.75; }

/* ── 共用动效 keyframes ───────────────────────────────────── */

@keyframes shakeX {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-7px, 3px, 0) rotate(-0.4deg); }
  32% { transform: translate3d(6px, -3px, 0) rotate(0.4deg); }
  50% { transform: translate3d(-4px, 2px, 0); }
  68% { transform: translate3d(3px, -1px, 0); }
  85% { transform: translate3d(-1px, 1px, 0); }
}
.shake-sm { animation: shakeX 240ms var(--ease); }
.shake-md { animation: shakeX 320ms var(--ease); }
.shake-lg { animation: shakeX 420ms var(--ease); }

@keyframes popFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), -80%) scale(1.18); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -210%) scale(0.9); }
}
.fx-pop {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  font-family: var(--ff-num);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  animation: popFloat 900ms var(--ease) forwards;
}
.fx-pop.gold { color: #fde047; font-size: 28px; }
.fx-pop.bad { color: #fda4af; }
.fx-pop.big { font-size: 34px; }

@keyframes flashOut { from { opacity: 0.85; } to { opacity: 0; } }
.fx-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: flashOut 300ms linear forwards;
}

@keyframes ringOut {
  from { opacity: 0.85; transform: translate(-50%, -50%) scale(0.35); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
.fx-ring {
  position: absolute;
  z-index: 4;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ringOut 480ms var(--ease) forwards;
}

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.bump { animation: bump 280ms var(--ease-pop); }

@keyframes riseIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes veilIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}