/* ==========================================================================
   围达 · 共享主题
   设计灵感来自漫画《棋魂》—— 温暖的木纹、墨色、淡雅的和风配色。
   ========================================================================== */

:root {
  /* 棋盘 / 木纹色 */
  --wood-base:     #e8c07b;
  --wood-warm:     #d69c50;
  --wood-deep:     #a96a27;
  --wood-line:     #3a2a1a;

  /* 纸张与卡面 */
  --paper:         #fbf4e3;
  --paper-soft:    #f5ead0;
  --paper-line:    #e3d1a4;

  /* 墨与字 */
  --ink:           #1c1a17;
  --ink-soft:      #3a352d;
  --ink-mute:      #6c6358;

  /* 点缀色 */
  --accent-red:    #c9372c;  /* 印章红 */
  --accent-indigo: #2a4d7a;  /* 蓝墨 */
  --accent-gold:   #c89a3c;
  --accent-moss:   #7a8d4c;

  /* 黑白子 */
  --stone-black-1: #1a1a1f;
  --stone-black-2: #343438;
  --stone-white-1: #fafafa;
  --stone-white-2: #d4d0c8;

  /* 阴影 / 层次 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 6px 18px rgba(60, 40, 20, 0.18);
  --shadow-lg: 0 18px 40px rgba(60, 40, 20, 0.25);

  /* 间距 */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --font-serif: "Ma Shan Zheng", "KaiTi", "STKaiti", "Noto Serif SC", "Songti SC", serif;
  --font-sans:  "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 230, 180, 0.5), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(180, 120, 60, 0.35), transparent 50%),
    linear-gradient(135deg, #f3e1b6 0%, #e6c487 50%, #d9a75d 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 淡淡的纸张纹理 (纯 CSS 点阵) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(90, 60, 20, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(90, 60, 20, 0.04) 1px, transparent 1px);
  background-size: 6px 6px, 14px 14px;
  background-position: 0 0, 3px 3px;
  z-index: 0;
}

a { color: var(--accent-indigo); text-decoration: none; }
a:hover { color: var(--accent-red); }

/* ===== 标题 ===== */

.brand {
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.brand .kanji {
  font-size: 1.5em;
  color: var(--accent-red);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

/* 红色印章 */
.seal {
  display: inline-block;
  padding: 2px 10px;
  background: var(--accent-red);
  color: #fff1e0;
  font-family: var(--font-serif);
  letter-spacing: 0.15em;
  border-radius: 3px;
  font-size: 0.85em;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-sm);
}

/* ===== 按钮 ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-primary {
  background: linear-gradient(180deg, #2f5585 0%, var(--accent-indigo) 100%);
  color: #f6efe0;
  border-color: #1c3a5e;
}
.btn-primary:hover { background: linear-gradient(180deg, #3a6799 0%, #315d8c 100%); }

.btn-danger {
  background: linear-gradient(180deg, #d34d42 0%, var(--accent-red) 100%);
  color: #fff1e0;
  border-color: #8d2620;
}
.btn-danger:hover { background: linear-gradient(180deg, #e5625a 0%, #d34d42 100%); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.4); }

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* ===== 输入 ===== */

.input {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--paper-line);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus {
  border-color: var(--accent-indigo);
  box-shadow: 0 0 0 3px rgba(42, 77, 122, 0.18);
}

/* ===== 卡片 ===== */

.card {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

/* ===== 棋子（用于徽章 / 图例 / 玩家头像） ===== */

.stone-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.45),
              inset 2px 2px 5px rgba(255, 255, 255, 0.25),
              0 1px 2px rgba(0, 0, 0, 0.3);
}
.stone-dot.black {
  background: radial-gradient(circle at 35% 30%, #5a5a5f, var(--stone-black-1) 70%);
}
.stone-dot.white {
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--stone-white-2) 80%);
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.18),
              inset 2px 2px 4px rgba(255, 255, 255, 0.9),
              0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ===== 动画 ===== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 55, 44, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(201, 55, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 55, 44, 0); }
}
.fade-in-up { animation: fadeInUp 0.35s ease both; }

/* ===== 工具类 ===== */

.hidden { display: none !important; }
.center { text-align: center; }
.row    { display: flex; align-items: center; gap: 12px; }
.col    { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1 1 auto; }