/*
 * 弈盘设计底座
 * 新页面按需引入；旧页面逐页迁移，避免一次性改变现有业务界面。
 */
:root {
  --yp-brand: #d92d32;
  --yp-brand-hover: #bd2429;
  --yp-brand-soft: #fff3f3;
  --yp-ink: #0b1f33;
  --yp-text: #34495e;
  --yp-muted: #64758b;
  --yp-subtle: #8b99aa;
  --yp-bg: #f7f8fa;
  --yp-surface: #ffffff;
  --yp-surface-soft: #f3f5f7;
  --yp-border: #dfe5ec;
  --yp-border-strong: #cbd4df;
  --yp-success: #138a5b;
  --yp-warning: #a86108;
  --yp-danger: #c83238;
  --yp-radius-sm: 8px;
  --yp-radius-md: 12px;
  --yp-radius-lg: 16px;
  --yp-shadow-popover: 0 16px 40px rgba(11, 31, 51, 0.12);
  --yp-font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --yp-ease: 160ms ease;
}

.yp-page {
  color: var(--yp-ink);
  background: var(--yp-surface);
  font-family: var(--yp-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.yp-page :focus-visible {
  outline: 3px solid rgba(217, 45, 50, 0.24);
  outline-offset: 3px;
}

.yp-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--yp-radius-sm);
  color: #fff;
  background: var(--yp-ink);
  transform: translateY(-160%);
  transition: transform var(--yp-ease);
}

.yp-skip-link:focus {
  transform: translateY(0);
}

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