:root {
  --paper: #fbf6e8;
  --ink: #3b302c;
  --red: #d9483b;
  --red-l: #ffe3db;
  --blue: #2f6db5;
  --blue-l: #dceefc;
  --yellow: #ffe27a;
  --font: "ZCOOL KuaiLe", "Comic Sans MS", "KaiTi", "STKaiti", "楷体", cursive;
  --bw: clamp(300px, min(560px, calc((100vh - 170px) / 1.47), calc(100vw - 440px)), 560px);
  --scribble: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .26 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
.defs { position: absolute; }
#doodles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
button { font-family: inherit; }

/* ---------- 标题 ---------- */
header { position: relative; z-index: 1; text-align: center; padding: 12px 0 0; }
h1 { margin: 0; font-size: 46px; font-weight: normal; letter-spacing: 6px; }
h1 span {
  display: inline-block; color: var(--c); transform: rotate(var(--r));
  text-shadow: 2px 2px 0 rgba(59, 48, 44, .12);
  animation: titleBob 3s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes titleBob { 50% { transform: rotate(var(--r)) translateY(-4px); } }
.sub { margin: 0; color: #84776c; font-size: 17px; }

/* ---------- 布局 ---------- */
.app {
  position: relative; z-index: 1;
  display: flex; gap: 28px; justify-content: center; align-items: flex-start;
  padding: 8px 16px 30px;
}
.board-area { display: flex; flex-direction: column; align-items: center; }
.board-paper { position: relative; padding: calc(var(--bw) * .09); }
#grid {
  position: relative; width: var(--bw); aspect-ratio: 7 / 9;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
#boardCanvas { position: absolute; z-index: 0; }

.river {
  position: absolute; z-index: 1; overflow: hidden; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cpath d='M0 7 q7 -5 14 0 t14 0 t14 0 t14 0' stroke='%232f7fc4' stroke-width='1.6' fill='none' opacity='.45' stroke-linecap='round'/%3E%3Cpath d='M-7 21 q7 -5 14 0 t14 0 t14 0 t14 0 t14 0' stroke='%235aa9e6' stroke-width='1.3' fill='none' opacity='.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 56px 28px;
  animation: flow 6s linear infinite;
}
@keyframes flow { to { background-position: 56px 0; } }
.fish { position: absolute; width: 18%; aspect-ratio: 40 / 24; top: 40%; left: 110%; opacity: .85; animation: swim 14s linear infinite 2s; }
.fish.late { top: 70%; animation-delay: 9s; animation-duration: 17s; }
.fish svg { width: 100%; height: 100%; display: block; }
@keyframes swim {
  0% { left: 110%; transform: translateY(0); }
  25% { transform: translateY(-30%); }
  50% { transform: translateY(20%); }
  75% { transform: translateY(-20%); }
  60%, 100% { left: -30%; }
}

#under, #over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#under { z-index: 2; }
#pieces { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#over { z-index: 4; }
#fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* ---------- 棋子 ---------- */
.piece {
  position: absolute; width: calc(100% / 7); height: calc(100% / 9);
  display: flex; align-items: center; justify-content: center; z-index: 1;
  transition: left .36s cubic-bezier(.34, 1.3, .5, 1), top .36s cubic-bezier(.34, 1.3, .5, 1);
}
.piece.moving { z-index: 5; }
.piece.selected { z-index: 4; }
.piece.eaten { z-index: 0; }
.piece.gone { display: none; }
.piece .act { width: 98%; height: 98%; position: relative; }
.piece .bob { width: 100%; height: 100%; transform-origin: 50% 90%; animation: breathe 3.2s ease-in-out infinite; }
.piece svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ani text { font-family: var(--font); }

@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
.piece.hover .bob { animation: none; transform: scale(1.08) rotate(-3deg); transition: transform .15s; }
.piece.selected .bob { animation: wiggle .55s ease-in-out infinite; }
@keyframes wiggle {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-9%) rotate(-6deg); }
  75% { transform: translateY(-9%) rotate(6deg); }
}
.piece.swim .bob { animation: float 2.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(5%) rotate(3deg); } }
.piece.swim .act::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 22%;
  border: 2px solid rgba(47, 127, 196, .55); border-radius: 50%;
  animation: ripple 1.8s ease-out infinite;
}
@keyframes ripple { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.piece.scared .bob { animation: shiver .2s linear infinite; }
@keyframes shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3%) rotate(-3deg); } 75% { transform: translateX(3%) rotate(3deg); } }
.piece.scared .act::after {
  content: ""; position: absolute; left: -2%; top: -4%; width: 26%; aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-3 5-6 8-6 11a6 6 0 0 0 12 0c0-3-3-6-6-11z' fill='%239fd0f5' stroke='%232f7fc4' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9.3 14a2.6 2.6 0 0 0 2.2 2.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: drip 1.1s ease-in infinite;
}
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(40%); opacity: .2; } }

.act.hop { animation: hop .36s ease-out; }
.act.leap { animation: leap .62s ease-in-out; }
@keyframes hop { 40% { transform: translateY(-14%) scale(1.07); } }
@keyframes leap { 45% { transform: translateY(-60%) scale(1.28) rotate(-10deg); } 80% { transform: translateY(4%) scale(1.05, .92); } }
.piece.eaten .act { animation: eaten .6s .22s ease-in forwards; }
@keyframes eaten {
  0% { transform: none; opacity: 1; }
  30% { transform: scale(1.15) rotate(-12deg); }
  100% { transform: scale(0) rotate(260deg); opacity: 0; }
}

/* 棋盘标记 */
.dot { animation: pulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.22); } }
.eatmark { animation: spin 7s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.brk { animation: brk .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brk { 50% { transform: scale(1.05); } }
.svgtxt { font-family: var(--font); }
.hintline { stroke-dasharray: 18 12; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -30; } }

/* 气泡 / 特效 */
.bubble {
  position: absolute; transform: translate(-50%, -100%);
  background: #fff; border: 2px solid var(--ink); border-radius: 16px 20px 14px 22px;
  padding: 3px 11px; font-size: clamp(13px, calc(var(--bw) * .032), 19px); white-space: nowrap;
  box-shadow: 2px 3px 0 rgba(59, 48, 44, .14);
  animation: bubble 1.9s ease forwards;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px;
  background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.bubble.red { background: #fff1ec; } .bubble.red::after { background: #fff1ec; }
.bubble.blue { background: #eef7ff; } .bubble.blue::after { background: #eef7ff; }
@keyframes bubble {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(.5); }
  12% { opacity: 1; transform: translate(-50%, -100%) scale(1.08); }
  20% { transform: translate(-50%, -100%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -130%); }
}
.drop {
  position: absolute; width: 1.6%; height: 1.4%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #6fb3f0; border: 1.5px solid #2f7fc4;
  animation: drop .7s ease-out forwards;
}
@keyframes drop { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
.boom { position: absolute; width: calc(var(--bw) * .09); transform: translate(-50%, -50%); animation: boom .8s ease-out forwards; }
@keyframes boom { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1.4); opacity: 0; } }

/* ---------- 小广播 ---------- */
.radio {
  margin-top: -6px; width: calc(var(--bw) * 1.12); min-height: 40px;
  background: #fffdf7; border: 2px solid var(--ink); border-radius: var(--scribble);
  padding: 8px 14px; font-size: 17px; box-shadow: 3px 4px 0 rgba(59, 48, 44, .1);
  display: flex; gap: 6px; align-items: center;
}
.radio b { white-space: nowrap; font-weight: normal; color: #8b6f4e; }
.radio-icon { animation: radio 1.6s ease-in-out infinite; display: inline-block; }
@keyframes radio { 50% { transform: rotate(-12deg) scale(1.1); } }
#broadcast.flash { animation: flash .5s ease; }
@keyframes flash { from { opacity: 0; transform: translateX(8px); } }

/* ---------- 侧栏便签 ---------- */
.side { width: 340px; display: flex; flex-direction: column; gap: 18px; }
.note {
  position: relative; background: #fffdf7; border: 2px solid var(--ink); border-radius: var(--scribble);
  padding: 14px 18px; box-shadow: 3px 4px 0 rgba(59, 48, 44, .12);
  transition: background .4s;
}
.note:nth-child(2) { transform: rotate(.6deg); }
.note:nth-child(3) { transform: rotate(-.7deg); }
.note.tape::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 90px; height: 24px;
  transform: translateX(-50%) rotate(-3deg); background: rgba(255, 226, 122, .75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.note h3 { margin: 0 0 8px; font-weight: normal; font-size: 21px; }
.note h3 small { font-size: 13px; color: #8d8076; }
body[data-turn="red"] #statusNote { background: var(--red-l); }
body[data-turn="blue"] #statusNote { background: var(--blue-l); }

.turn { display: flex; align-items: center; gap: 12px; }
.avatar { width: 72px; height: 72px; flex: none; }
.avatar.think { animation: think 1s ease-in-out infinite; }
@keyframes think { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
#turnText { font-size: 25px; }
#turnSub { font-size: 15px; color: #7c6f66; min-height: 20px; }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.counts { display: flex; gap: 10px; margin: 10px 0 4px; }
.tag { display: inline-block; padding: 1px 10px; border-radius: 12px 6px 14px 8px; border: 2px solid var(--ink); font-size: 15px; background: #fff; white-space: nowrap; }
.tag.red { background: #ffc9bb; }
.tag.blue { background: #bfe0f8; }
#peace { font-size: 14px; color: #8d6e4e; min-height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.btn {
  font-size: 16px; padding: 6px 12px; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  cursor: pointer; box-shadow: 2px 2px 0 rgba(59, 48, 44, .14);
  transition: transform .15s, background .2s;
}
.btn:hover { transform: rotate(-2deg) scale(1.05); }
.btn:active { transform: scale(.95); }
.btn.on { background: var(--yellow); }
.btn.primary { background: #c6e8ad; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.label { font-size: 15px; color: #7c6f66; margin: 6px 0 4px; }
.label small { font-size: 12px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { font-size: 15px; padding: 4px 10px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 10px 0 2px; font-size: 16px; }
.check input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 4px 7px 5px 6px; background: #fff; position: relative; flex: none;
}
.check input:checked::after { content: ""; position: absolute; left: 1px; top: -6px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5.5L21 4' fill='none' stroke='%23d9483b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
body.pvp .ai-only { display: none; }

.tray-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.tray { display: flex; flex-wrap: wrap; gap: 2px; min-height: 44px; align-items: center; flex: 1; }
.tray .empty { color: #b3a79c; font-size: 14px; }
.mini { width: 40px; height: 40px; position: relative; animation: snooze 3s ease-in-out infinite; }
.mini svg { width: 100%; height: 100%; }
.mini::after { content: "z"; position: absolute; right: -2px; top: -6px; font-size: 13px; color: #7a8ea8; animation: zzz 2.4s ease-in infinite; }
@keyframes snooze { 50% { transform: rotate(-4deg) translateY(1px); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -12px) scale(1.5); } }

#log { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto; font-size: 15px; }
#log li { padding: 4px 2px; border-bottom: 1px dashed #d8cfc4; display: flex; gap: 6px; }
#log li .n { color: #b3a79c; min-width: 26px; }
#log li .who { flex: none; width: 11px; height: 11px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 50% 45% 55% 48%; }
#log li.red .who { background: #ef6f5f; }
#log li.blue .who { background: #5b97dc; }
#log li:first-child { animation: flash .4s ease; }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(60, 48, 40, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hidden { display: none; }
.cert {
  position: relative; background: #fffaf0; border: 3px solid var(--ink); border-radius: var(--scribble);
  outline: 2px dashed #e0b84f; outline-offset: -14px;
  padding: 34px 38px 26px; text-align: center; width: min(440px, 100%);
  box-shadow: 6px 8px 0 rgba(59, 48, 44, .18);
  animation: popin .55s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes popin { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.cert-ribbon {
  display: inline-block; font-size: 30px; padding: 4px 28px; margin-top: -54px; margin-bottom: 6px;
  background: #ff9f8f; border: 2px solid var(--ink); border-radius: 8px 20px 10px 18px; transform: rotate(-2deg);
}
#winAvatar { display: flex; justify-content: center; height: 130px; margin: 6px auto; animation: dance .9s ease-in-out infinite; }
@keyframes dance { 25% { transform: rotate(-8deg) translateY(-6px); } 75% { transform: rotate(8deg) translateY(-6px); } }
#winText { font-size: 34px; }
#winReason { font-size: 18px; color: #6f625a; margin: 6px 0; }
.cert-stars { margin: 4px 0 12px; display: flex; gap: 6px; justify-content: center; }
.cert-stars .icon { width: 34px; height: 34px; }
.cert-stars .icon:nth-child(2) { transform: translateY(-6px) scale(1.15); }
.cert .row { display: flex; gap: 10px; justify-content: center; }
.cert.rules { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; text-align: left; outline: none; }
.cert.rules .cert-ribbon { margin-top: 0; display: block; width: max-content; margin: 0 auto 8px; }
.cert.rules h4 { margin: 14px 0 6px; font-weight: normal; font-size: 20px; color: #8b5a2b; }
.cert.rules ul { margin: 0; padding-left: 22px; line-height: 1.7; font-size: 16px; }
.cert.rules .special { font-size: 16px; background: #fff1c9; padding: 6px 10px; border-radius: 10px 4px 12px 6px; }
.close { position: absolute; right: 14px; top: 12px; padding: 2px 10px; }
#chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }
#chain .m { width: 54px; height: 54px; }
#chain .gt { font-size: 20px; color: #a08a76; }

.confetti {
  position: fixed; top: -24px; z-index: 60; width: 12px; height: 7px; border-radius: 3px 6px 2px 5px;
  pointer-events: none; animation: fall linear forwards;
}
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rx)); } }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  :root { --bw: min(520px, calc((100vw - 24px) / 1.2)); }
  .app { flex-direction: column; align-items: center; gap: 22px; }
  .side { width: min(100%, 560px); }
  h1 { font-size: 34px; }
  .sub { font-size: 14px; padding: 0 12px; }
  .radio { width: 100%; font-size: 15px; }
}

/* ---------- 手绘图标 ---------- */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.28em; overflow: visible; flex: none; }
.minihead { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -0.45em; }
.minihead svg { width: 100%; height: 100%; }
.boom .icon, #winAvatar svg { width: 100%; height: 100%; }
#winAvatar svg { width: 130px; }
.radio-icon .icon { width: 26px; height: 26px; }
.note h3 .icon { width: 26px; height: 26px; }
.tdot { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 50% 45% 55% 48%; vertical-align: -1px; }
.tdot.red { background: #ef6f5f; } .tdot.blue { background: #5b97dc; }
.special .icon { width: 22px; height: 22px; vertical-align: -0.45em; }
.close .icon { width: 18px; height: 18px; vertical-align: -0.2em; }

/* 全身棋子：选中时挥挥手 */
.piece.selected .arm-r { animation: wave .5s ease-in-out infinite; transform-box: fill-box; transform-origin: 30% 15%; }
.piece.scared .arm-l, .piece.scared .arm-r { animation: shake .2s linear infinite; transform-box: fill-box; transform-origin: 50% 15%; }
@keyframes wave { 50% { transform: rotate(-50deg); } }
@keyframes shake { 50% { transform: rotate(15deg); } }
.avatar svg { width: 100%; height: 100%; }