/* 五行养园：园子、逐步反馈、手牌（三才堂规范：彩色只给五行） */
.board-card { padding: var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.gboard { position: relative; width: 460px; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.board-foot { min-height: 38px; display: flex; justify-content: center; gap: var(--s2); }

.btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ═══ 说明条：每一步用一行大字讲清楚 */
.caption {
  align-self: stretch; min-height: 3.4rem; display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .35rem;
  padding: .6rem 1rem; border-radius: var(--r); background: var(--surface-2); border-left: 4px solid var(--line);
  font-family: var(--mincho); font-size: var(--t-title); font-weight: var(--w-emph); line-height: 1.5; color: var(--ink);
  transition: background .2s, border-color .2s;
}
.caption .muted { font-family: var(--gothic); font-size: var(--t-caption); font-weight: var(--w-read); }
.caption.idle, .caption.summary { font-size: var(--t-body); }
.caption.preview { border-left-color: var(--ink-3); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-body); }
.caption.sheng { border-left-color: var(--moku); background: var(--moku-bg); }
.caption.ke    { border-left-color: var(--ka);   background: var(--ka-bg); }
.caption.spawn { border-left-color: var(--ink);  background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.caption.ink   { border-left-color: var(--ink-3); }
.caption.hist  { border-left-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-body); line-height: 2; }
.caption .hs em { font-style: normal; font-family: var(--gothic); font-size: var(--t-micro); color: var(--ink-3); margin-right: .3em; }
.caption .hs-ar { color: var(--ink-3); margin: 0 .4em; font-weight: 400; }
.caption.bad   { border-left-color: var(--accent); background: var(--accent-bg); font-size: var(--t-body); }
.caption b.sheng, .log b.sheng { color: var(--moku); }
.caption b.ke,    .log b.ke    { color: var(--ka); }
.caption b.spawn { color: var(--ink); }

/* ═══ 格子 */
/* 网站 site.css 也有 .tile（首页卡片）和 .empty（虚线框），这里把它们带来的阴影、裁切、边框清掉 */
.tile { position: relative; aspect-ratio: 1; border-radius: var(--r); background: var(--surface-2); display: block; padding: 0; overflow: visible; box-shadow: none; border: 0; transition: box-shadow .2s, background .2s, opacity .2s; }
.tile.empty { cursor: pointer; }
.tile.empty:hover { background: #ebebe9; box-shadow: inset 0 0 0 1px var(--ink-3); }
.tile:not(.empty) { cursor: default; background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-line); }
.tile .ghost { position: absolute; inset: 16%; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tile .ghost svg { width: 100%; height: 100%; }
.tile.empty:hover .ghost, .tile.empty:focus-visible .ghost { opacity: .42; }
.tile:not(.empty) .ghost { display: none; }

/* 棋子：图标大小 + 左下三个点 = 等级 */
.plant { position: absolute; inset: 3%; display: grid; place-items: center; transform: scale(var(--s, .96)); transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .4s; pointer-events: none; }
.plant svg { width: 100%; height: 100%; }
.plant.sprout svg { animation: sprout .5s cubic-bezier(.3,1.6,.5,1); }
.plant.dying { opacity: 0; transform: scale(.2); }
.tile .ch { position: absolute; right: 6px; bottom: 3px; font-family: var(--kanshi); font-weight: var(--w-decl); font-size: calc(var(--tile, 88px) * .17); line-height: 1; color: var(--c); text-shadow: 0 0 3px var(--c-bg), 0 0 3px var(--c-bg); pointer-events: none; }
.tile .pips { position: absolute; left: 7px; bottom: 7px; display: flex; gap: 3px; pointer-events: none; }
.tile .pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line); }
.tile .pips i.on { background: var(--c); }
.tile.empty .pips { display: none; }
/* 满级：粗框 + 「满」字，提醒再被生一次就会长出新的 */
.tile .full-tag { display: none; position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 4px; background: var(--c); color: #fff; font-family: var(--mincho); font-weight: var(--w-decl); font-size: calc(var(--tile, 88px) * .15); line-height: 1.25; pointer-events: none; }
.tile.full { box-shadow: inset 0 0 0 2.5px var(--c); }
.tile.full .full-tag { display: block; }

/* 邪気：墨色底、图标褪色、左上「邪」 */
.tile.jaki { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); cursor: not-allowed; }
.tile.jaki .plant svg { filter: grayscale(1) brightness(1.7); opacity: .5; }
.tile.jaki .ch { color: #fff; text-shadow: none; opacity: .85; }
.tile.jaki .pips, .tile.jaki .ghost { display: none; }
.tile .jaki-tag { display: none; position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 4px; background: #fff; color: var(--ink); font-family: var(--mincho); font-weight: var(--w-decl); font-size: calc(var(--tile, 88px) * .15); line-height: 1.25; pointer-events: none; }
.tile.jaki .jaki-tag { display: block; }
.nm.jk { background: var(--ink); color: #fff; box-shadow: none; }

/* 这一步的主角：源头描墨边，目标描关系色 */
.tile.src { box-shadow: inset 0 0 0 3px var(--ink); z-index: 1; }
.tile.tgt-sheng { box-shadow: inset 0 0 0 4px var(--moku), 0 0 0 4px rgba(29,107,70,.15); z-index: 1; }
.tile.tgt-ke { box-shadow: inset 0 0 0 4px var(--ka), 0 0 0 4px rgba(179,57,42,.15); z-index: 1; animation: shake .35s; }
.tile.tgt-purify { box-shadow: inset 0 0 0 4px var(--ka), 0 0 0 4px rgba(179,57,42,.2); z-index: 1; }
.tile.tgt-spawn { box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 4px rgba(26,26,25,.1); z-index: 1; }

/* ═══ 箭头：当前一步粗、之前的淡、预览虚线 */
.links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.links line { stroke-linecap: round; }
.links line.sheng { stroke: var(--moku); }
.links line.ke    { stroke: var(--ka); }
.links line.spawn { stroke: var(--ink-2); stroke-dasharray: 3 8; }
.links line.purify { stroke: var(--ka); }
.links line.now { stroke-width: 6; animation: draw .35s ease-out both; }
.links line.old { stroke-width: 2.5; opacity: .28; }
.links line.preview { stroke-width: 3; stroke-dasharray: 6 6; opacity: .75; }
.gfx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.rtag { position: absolute; transform: translate(-50%, -50%); font-family: var(--mincho); font-weight: var(--w-decl); font-size: var(--t-body); line-height: 1; padding: .28em .45em; border-radius: 4px; color: #fff; box-shadow: 0 0 0 2px #fff, var(--sh-2); animation: popIn .25s ease-out both; white-space: nowrap; }
.rtag.sheng { background: var(--moku); }
.rtag.ke    { background: var(--ka); }
.rtag.spawn { background: var(--ink); font-size: var(--t-caption); }
.rtag.purify { background: var(--ka); font-size: var(--t-caption); }
.rtag.preview { display: none; }
/* 目标格上的大号 +1 / −1 */
.pop { position: absolute; z-index: 2; transform: translate(-50%, -50%); font-family: var(--mincho); font-weight: var(--w-decl); font-size: clamp(18px, calc(var(--tile, 88px) * .3), 30px); line-height: 1; padding: .18em .42em .22em; border-radius: 6px; color: #fff; box-shadow: 0 0 0 2.5px #fff, 0 6px 16px -6px rgba(26,26,25,.5); animation: popNum 1.05s cubic-bezier(.2,.7,.3,1) forwards; white-space: nowrap; }
.pop.sheng { background: var(--moku); }
.pop.ke, .pop.die { background: var(--ka); }
.pop.purify { background: var(--ink); }
.pop.spawn { background: var(--ink); font-size: clamp(14px, calc(var(--tile, 88px) * .22), 22px); }
/* 预览的小 ±1 */
.pchip { position: absolute; transform: translate(-50%, -50%); font-family: var(--mincho); font-weight: var(--w-decl); font-size: var(--t-caption); line-height: 1; padding: .25em .45em; border-radius: 4px; background: #fff; box-shadow: var(--sh-2); }
.pchip.sheng { color: var(--moku); box-shadow: inset 0 0 0 1.5px var(--moku), var(--sh-2); }
.pchip.ke    { color: var(--ka);   box-shadow: inset 0 0 0 1.5px var(--ka), var(--sh-2); }

/* ═══ 目标 */
.goal-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.goal-card .row b { font-family: var(--mincho); font-size: var(--t-title); font-variant-numeric: tabular-nums; color: var(--ink); }
.track--plain::before { display: none; }
.goal-note { margin: var(--s2) 0 0; }
.goal-note b { font-family: var(--mincho); color: var(--ink); }
/* 邪気の気配：芽吹かない手の回数。あと 1 手で湧くときは赤 */
.jaki-gauge { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .5rem; }
.gauge { display: inline-flex; gap: 4px; }
.gauge i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.gauge i.on { background: var(--ink); }
.gauge.warn i.on { background: var(--ka); }
.gauge-note { font-size: var(--t-micro); }

/* ═══ 手牌 */
.hand { display: flex; gap: var(--s2); }
.hcard { flex: 1 1 0; height: 92px; padding: 6px 0 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: 1fr auto; place-items: center; color: var(--c); transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.hcard svg { width: 54px; height: 54px; pointer-events: none; }
.hcard .hch { font-family: var(--kanshi); font-weight: var(--w-decl); font-size: var(--t-caption); line-height: 1; letter-spacing: .1em; }
.hcard:hover { background: var(--c-bg); border-color: var(--c-line); }
.hcard.on { background: var(--c-bg); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); transform: translateY(-2px); }

/* ═══ 刚才发生了 */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 15rem; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .4rem; align-items: baseline; padding: .35rem .55rem; border-radius: var(--r); background: var(--surface-2); border-left: 3px solid var(--line); font-size: var(--t-caption); line-height: 1.6; }
.log li .n { font-family: var(--mincho); color: var(--ink-3); font-weight: var(--w-emph); text-align: right; }
.log li.sheng { border-left-color: var(--moku); }
.log li.ke    { border-left-color: var(--ka); }
.log li.spawn { border-left-color: var(--ink); }
.log li.cur { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.log li.empty { display: block; color: var(--ink-3); border: 0; border-left: 3px solid var(--line); text-align: left; background: var(--surface-2); }   /* 网站 site.css 的 .empty 是虚线框，这里覆盖回来 */
.log li em.new { font-style: normal; margin-left: .5em; padding: 0 .4em; border-radius: 4px; background: var(--moku-bg); color: var(--moku); border: 1px solid var(--moku-line); font-size: .9em; white-space: nowrap; }

.log .nm { font-size: var(--t-caption); }

.side .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

@keyframes sprout { 0% { transform: scale(.2); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes draw { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes popNum { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -85%); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* 窄屏：目标 → 园子（含说明条）→ 手牌 → 刚才发生了 → 其余 */
@media (max-width: 980px) {
  .split > .side { display: contents; }
  .split > .board-card { order: 1; }
  .side > * { order: 4; }
  .side > .goal-card { order: 0; }
  .side > .hand-card { order: 2; }
  .side > .log-card { order: 3; }
}
@media (max-width: 720px) {
  .page-head p { display: none; }
  .goal-card { padding: var(--s3) var(--s4); }
  .goal-card .block__title { display: none; }
  .goal-card .row { margin-bottom: var(--s1); }
  .goal-note { margin-top: var(--s1); }
  .hand-card { padding: var(--s3) var(--s4); }
  .hand-card .block__title { display: none; }
  .board-card { padding: var(--s2); gap: var(--s2); }
  .caption { font-size: var(--t-body); min-height: 3rem; padding: .5rem .7rem; }
  .caption.idle, .caption.summary, .caption.preview { font-size: var(--t-caption); }
  .tiles { gap: 4px; }
  .tile .pips { left: 5px; bottom: 4px; gap: 2px; }
  .tile .pips i { width: 6px; height: 6px; }
  .tile .ch { right: 4px; }
  .hcard { height: 80px; }
  .hcard svg { width: 44px; height: 44px; }
  .rtag { font-size: var(--t-caption); }
  .links line.now { stroke-width: 4.5; }
}