/* 五行消消乐：盘面与棋子（三才堂规范：字是主角，彩色只给五行） */
.board-card { padding: var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s3); overflow: hidden; }
.board-foot { display: flex; justify-content: center; }

/* ═══ 说明条：这一轮发生了什么 */
.msg {
  align-self: stretch; min-height: 3rem; display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .35rem;
  padding: .5rem 1rem; border-radius: var(--r); background: var(--surface-2); border-left: 4px solid var(--line);
  font-family: var(--mincho); font-size: var(--t-body); font-weight: var(--w-emph); line-height: 1.5; color: var(--ink);
  word-break: auto-phrase; transition: background .2s, border-color .2s;
}
.msg .muted { font-family: var(--gothic); font-size: var(--t-caption); font-weight: var(--w-read); }
.msg b.sheng { color: var(--moku); margin: 0 .1em; }
.msg b.ke { color: var(--ka); }
.msg.sheng { border-left-color: var(--moku); background: var(--moku-bg); }
.msg.ke { border-left-color: var(--ka); background: var(--ka-bg); }
.msg.ink { border-left-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.msg.bad { border-left-color: var(--accent); background: var(--accent-bg); }
.board { --cell: 48px; position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 7); touch-action: none; user-select: none; -webkit-user-select: none; }
.slots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); }
.slots i { margin: 2px; border-radius: var(--r); background: var(--surface-2); }

/* 棋子：五行底色 + 五行色的大字 */
.pc { position: absolute; left: 0; top: 0; z-index: 1; width: var(--cell); height: var(--cell); transition: transform .22s cubic-bezier(.35,.75,.4,1); will-change: transform; cursor: pointer; }
.pc.no-tr { transition: none; }
.pc-in {
  position: absolute; inset: 3px; display: grid; place-items: center; border-radius: var(--r);
  background: var(--c-bg); color: var(--c); box-shadow: inset 0 0 0 1px var(--c-line);
  transition: transform .22s ease, opacity .22s ease, background .2s, box-shadow .2s;
}
.pc-in svg { width: 84%; height: 84%; pointer-events: none; }
.pc-ch { position: absolute; right: 4px; bottom: 2px; font-family: var(--kanshi); font-weight: var(--w-decl); font-size: calc(var(--cell) * .22); line-height: 1; color: var(--c); text-shadow: 0 0 2px var(--c-bg), 0 0 3px var(--c-bg); pointer-events: none; }
.pc.sel .pc-in { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--c-line), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* 旺：五行色粗框 + 实心「旺」字徽章（同三才堂实心徽章） */
.pc .wang { display: none; position: absolute; left: 0; top: 0; z-index: 2; place-items: center; width: calc(var(--cell) * .32); height: calc(var(--cell) * .32); border-radius: 4px; background: var(--c); color: #fff; font-family: var(--mincho); font-weight: var(--w-decl); font-size: calc(var(--cell) * .2); line-height: 1; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.pc.charged .wang { display: grid; }
.pc.charged .pc-in { box-shadow: inset 0 0 0 3px var(--c), 0 4px 10px -4px rgba(26,26,25,.45); }
.pc.charged .pc-in svg { animation: wang 1.6s ease-in-out infinite; }
.pc.charging .pc-in { animation: charge .5s cubic-bezier(.3,1.6,.5,1); }

/* 相生の矢印：相邻两枚相生时，缝里一个小绿箭头（母 → 子）。结算中隐去；「輪と矢印をかくす」时不画 */
.lks { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .2s; }
.lks i { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--rot)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--moku); filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); opacity: .9; }
.board.is-busy .lks { opacity: 0; transition: none; }
.board.no-links .lks { display: none; }

/* 连线中的駒 / 放置提示 */
.pc.lit .pc-in { box-shadow: inset 0 0 0 3px var(--moku), 0 0 0 3px rgba(29,107,70,.18); }
.pc.hint .pc-in { animation: hintPulse 1.1s ease-in-out infinite; }
.arr { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--rot)); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--moku); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff); animation: popIn .2s ease-out both; }

/* 消除与被克 */
.pc.clearing .pc-in { transform: scale(.2); opacity: 0; }
.pc.clearing .wang { display: none; }
.pc.hit .pc-in { box-shadow: inset 0 0 0 1px var(--c-line), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); animation: shake .3s; }

/* 特效层 */
.fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.beam { position: absolute; background: var(--c); opacity: 0; border-radius: var(--r); animation: beam .5s ease-out forwards; }
.fl { position: absolute; transform: translate(-50%, -50%); font-family: var(--mincho); font-weight: var(--w-decl); font-size: var(--t-caption); line-height: 1.2; padding: .3em .65em; border-radius: var(--r); white-space: nowrap; letter-spacing: .04em; box-shadow: var(--sh-2); animation: floatUp 1.25s ease-out forwards; }
.fl.sheng { background: var(--moku-bg); color: var(--moku); border: 1px solid var(--moku-line); }
.fl.ke    { background: var(--ka-bg);   color: var(--ka);   border: 1px solid var(--ka-line); }
.combo.sorou { color: var(--moku); }
.fl.score { background: none; border: 0; box-shadow: none; color: var(--ink); font-size: var(--t-title); text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
.combo { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: var(--mincho); font-weight: var(--w-decl); font-size: clamp(26px, 6vw, 38px); line-height: 1; color: var(--accent); letter-spacing: .08em; white-space: nowrap; text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 20px #fff; animation: combo 1s ease-out forwards; }

.side .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.wheel-foot { display: flex; justify-content: center; margin-top: var(--s3); }

@keyframes wang { 50% { transform: scale(1.07); } }
@keyframes hintPulse { 50% { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 5px rgba(26,26,25,.12); } }
@keyframes popIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes charge { 0% { transform: scale(.82); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes beam { 0% { opacity: 0; } 25% { opacity: .2; } 100% { opacity: 0; } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
@keyframes combo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* 窄屏：侧栏拆开，计分牌放到盘面上面，其余放下面 */
@media (max-width: 980px) {
  .split > .side { display: contents; }
  .split > .board-card { order: 1; }
  .side > * { order: 2; }
  .side > .tally-row { order: 0; }
}
@media (max-width: 720px) {
  .board-card { padding: var(--s2); }
  .fl { font-size: var(--t-micro); }
}