/* 影翻棋 · 公共样式：色彩、字体、棋子、印章、按钮 */

:root {
  /* 色彩 */
  --paper: #F4EEE1;          /* 宣纸：页面底色 */
  --paper-card: #FBF7EE;     /* 熟宣：卡片、弹窗 */
  --paper-soft: #FAF5EA;
  --ink: #1D1A17;            /* 浓墨：正文、黑方 */
  --ink-2: #3E3832;
  --ink-3: #5E554B;
  --ink-mute: #6A6055;       /* 淡墨：辅助文字 */
  --cinnabar: #B3301E;       /* 朱砂：主按钮、印章 */
  --cinnabar-deep: #7E1E12;
  --cinnabar-text: #A12B1A;
  --piece-red: #A8291A;      /* 棋红：红方棋字 */
  --piece-black: #1F1B17;
  --on-cinnabar: #FBF6EC;
  --seal-text: #FBF0E0;
  --wood-ink: #4A3320;       /* 棋盘墨线 */
  --line: rgba(29, 26, 23, 0.12);
  --line-strong: rgba(29, 26, 23, 0.25);

  /* 字体 */
  --font-body: 'LXGW WenKai TC', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;
  --font-brush: 'Ma Shan Zheng', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;
  --font-poem: 'Zhi Mang Xing', 'Ma Shan Zheng', 'Kaiti SC', serif;
  --font-latin: 'Cormorant Garamond', 'Times New Roman', serif;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--cinnabar);
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--cinnabar);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 宣纸纹理：平铺噪点，正片叠底在底色之上、内容之下 */
.paper {
  position: relative;
  isolation: isolate;
}

.paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.25 0.4 0 0 0 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ===== 棋子 =====
   明子：黄杨木面；暗子：朱漆（红方调遣）/ 黑漆（黑方调遣），面上写「影」 */
.pc {
  --ring: 1.5px;
  --d1: 2px;
  --d2: 4px;
  --d3: 7px;
  --blur: 10px;
  position: relative;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.pc::before {
  content: '';
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: var(--ring) solid currentColor;
  opacity: 0.5;
  pointer-events: none;
}

/* 小号棋子（手机棋盘、阵亡栏、提示）用更浅的投影 */
.pc--sm {
  --ring: 1.2px;
  --d1: 1.5px;
  --d2: 3px;
  --d3: 5px;
  --blur: 7px;
}

.pc-face {
  background: radial-gradient(circle at 36% 30%, #FFF7E2 0%, #F2DFB4 42%, #DCB97F 100%);
  box-shadow:
    inset 0 0 0 var(--ring) #B98A50,
    inset 0 -2px 3px rgba(110, 70, 30, 0.3),
    0 var(--d1) 0 #A0723C,
    0 var(--d2) 0 #7C5228,
    0 var(--d3) var(--blur) rgba(40, 25, 10, 0.32);
  text-shadow: 0 1px 0 rgba(255, 250, 232, 0.8);
}

.pc-red {
  color: var(--piece-red);
}

.pc-black {
  color: var(--piece-black);
}

.pc-lq {
  font-family: var(--font-brush);
  font-weight: 400;
}

.pc-lq-red {
  background: radial-gradient(circle at 34% 28%, #E46A4F 0%, #B9351F 46%, #841F0F 100%);
  color: rgba(255, 224, 182, 0.85);
  box-shadow:
    inset 0 0 0 var(--ring) rgba(90, 18, 8, 0.55),
    inset 0 2px 3px rgba(255, 196, 166, 0.35),
    0 var(--d1) 0 #701A0D,
    0 var(--d2) 0 #52130A,
    0 var(--d3) var(--blur) rgba(50, 12, 5, 0.32);
  text-shadow: 0 -1px 0 rgba(60, 10, 4, 0.45);
}

.pc-lq-black {
  background: radial-gradient(circle at 34% 28%, #5E5750 0%, #2C2824 48%, #131110 100%);
  color: rgba(228, 208, 170, 0.75);
  box-shadow:
    inset 0 0 0 var(--ring) rgba(0, 0, 0, 0.6),
    inset 0 2px 3px rgba(255, 255, 255, 0.12),
    0 var(--d1) 0 #0E0C0B,
    0 var(--d2) 0 #000,
    0 var(--d3) var(--blur) rgba(0, 0, 0, 0.32);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* ===== 印章 ===== */
.seal {
  --seal-bg: var(--cinnabar);
  --seal-fg: var(--seal-text);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  background: var(--seal-bg);
  color: var(--seal-fg);
  font-family: var(--font-brush);
  font-weight: 400;
  line-height: 1;
  border-radius: 3px 5px 4px 6px;
}

.seal--ink {
  --seal-bg: var(--ink);
  --seal-fg: var(--paper);
}

/* 带内框的印章：朱底留一圈白边 */
.seal--framed {
  --frame: 3px;
  box-shadow:
    inset 0 0 0 var(--frame) var(--seal-bg),
    inset 0 0 0 calc(var(--frame) * 1.5) rgba(251, 240, 224, 0.85);
}

.seal--round {
  border-radius: 50%;
}

.seal__v {
  writing-mode: vertical-rl;
}

/* 品牌印：影翻 */
.brand-seal {
  width: 46px;
  height: 46px;
  font-size: 19px;
  border-radius: 5px 8px 6px 9px;
  transform: rotate(-4deg);
}

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--cinnabar);
  color: var(--on-cinnabar);
  box-shadow: 0 2px 0 var(--cinnabar-deep);
}

.btn--primary:hover {
  color: var(--on-cinnabar);
  filter: brightness(0.9);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink:hover {
  color: var(--paper);
  filter: brightness(1.25);
}

.btn--outline {
  border-color: var(--ink);
}

.btn--soft {
  border-color: rgba(29, 26, 23, 0.55);
}

.btn--outline:hover,
.btn--soft:hover {
  color: var(--ink);
  background: rgba(29, 26, 23, 0.07);
}

.btn--cinnabar {
  border-color: var(--cinnabar);
  color: var(--piece-red);
}

.btn--cinnabar:hover {
  color: var(--piece-red);
  background: rgba(179, 48, 30, 0.08);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  border: 1.5px dashed rgba(29, 26, 23, 0.3);
  background: transparent;
  color: rgba(29, 26, 23, 0.4);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

/* 圆角胶囊工具按钮（规则、音乐） */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pill:hover {
  color: var(--ink);
  background: rgba(29, 26, 23, 0.07);
}

.pill .icon {
  stroke-width: 1.8;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover {
  color: var(--ink);
  background: rgba(29, 26, 23, 0.07);
}

.icon-btn .icon {
  stroke-width: 1.8;
}

/* 音乐开关：开时显示红点，关时显示斜杠与「静音」 */
.music-toggle .music__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cinnabar);
}

.music-toggle .music__slash,
.music-toggle .music__off {
  display: none;
}

.music-toggle[aria-pressed='false'] {
  border-style: dashed;
  border-color: rgba(29, 26, 23, 0.3);
  color: var(--ink-mute);
}

.music-toggle[aria-pressed='false'] .music__slash {
  display: inline;
}

.music-toggle[aria-pressed='false'] .music__off {
  display: inline;
}

.music-toggle[aria-pressed='false'] .music__on,
.music-toggle[aria-pressed='false'] .music__dot {
  display: none;
}

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