:root{
  --ink:#332a20; --ink2:#6f5d46;
  --line:#7a5a35; --red:#a8342c;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;min-height:100%}
body{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,2.2vw,26px);
  color:var(--ink);
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif;
  background:radial-gradient(120% 90% at 50% -10%,#f7eedb 0%,#ede0c4 45%,#e0cfa9 100%);
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior-y:contain;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(120,90,50,.030) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(120,90,50,.024) 0 1px,transparent 1px 4px),
    radial-gradient(85% 65% at 50% 45%,transparent 52%,rgba(118,84,40,.15) 100%);
  mix-blend-mode:multiply;
}
.far-ink{
  position:fixed; left:0; right:0; bottom:0; height:40vh; z-index:1;
  pointer-events:none; filter:blur(1.5px);
  background:
    radial-gradient(60% 100% at 10% 122%,rgba(96,110,84,.20),transparent 62%),
    radial-gradient(52% 92% at 33% 132%,rgba(84,98,74,.16),transparent 60%),
    radial-gradient(70% 108% at 79% 126%,rgba(96,110,84,.18),transparent 62%),
    radial-gradient(46% 82% at 58% 142%,rgba(78,92,70,.13),transparent 60%);
}
#leaves{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9;
}
.app{position:relative; z-index:3; width:min(1180px,100%)}

/* ===== 抬头 ===== */
.top{display:flex; align-items:center; gap:clamp(12px,1.6vw,18px)}
.seal{
  width:clamp(42px,6vw,56px); aspect-ratio:1/1; flex:0 0 auto;
  display:grid; place-items:center; border-radius:6px 8px 6px 8px;
  background:linear-gradient(155deg,#b8382e,#93241d 65%,#7c1a15);
  color:#f7ead2; font-size:clamp(20px,3vw,26px); line-height:1;
  transform:rotate(-4deg);
  box-shadow:inset 0 0 0 1px rgba(255,220,190,.35),
             inset 0 -6px 12px rgba(0,0,0,.25),
             0 8px 18px -10px rgba(120,20,10,.9);
}
h1{margin:0; font-weight:600; letter-spacing:.3em; margin-right:-.3em;
   font-size:clamp(23px,3.3vw,34px); text-shadow:0 1px 0 rgba(255,255,255,.6)}
.sub{margin:4px 0 0; font-size:clamp(11.5px,1.35vw,13.5px);
     letter-spacing:.18em; color:var(--ink2)}
.rule{position:relative; height:1px; margin:clamp(12px,1.8vw,18px) 0 clamp(14px,2vw,22px);
      background:linear-gradient(90deg,transparent,rgba(110,80,45,.55),transparent)}
.rule::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  background:var(--line); opacity:.6;
  transform:translate(-50%,-50%) rotate(45deg);
}
.sound-btn{
  margin-left:auto; flex:0 0 auto;
  font:inherit; font-size:clamp(12px,1.5vw,14px); letter-spacing:.12em;
  padding:8px 15px; border-radius:20px;
  color:#5b4a34; background:linear-gradient(180deg,#f8f1e2,#e9dcc3);
  border:1px solid rgba(120,90,55,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 8px 16px -12px rgba(60,35,10,.9);
}
.sound-btn:hover{filter:brightness(1.04)}
.sound-btn.off{color:#93856f; background:linear-gradient(180deg,#f2ebdc,#e2d6bf)}

/* ===== 主体 ===== */
.stage{display:flex; gap:clamp(16px,2.4vw,30px); align-items:flex-start; justify-content:center}
.board-wrap{
  position:relative; flex:0 0 auto; aspect-ratio:1/1;
  padding:clamp(7px,1.1vw,12px);
  border-radius:12px;
  background:linear-gradient(150deg,#8b6035,#6d4522 45%,#57330f);
  box-shadow:0 26px 48px -22px rgba(48,26,4,.85),
             inset 0 0 0 1px rgba(255,228,178,.28),
             inset 0 2px 10px rgba(255,225,170,.18);
}
.board-inner{width:100%; aspect-ratio:1/1}
#board{display:block; border-radius:6px; touch-action:none; cursor:pointer}
.sweep{
  position:absolute; inset:clamp(7px,1.1vw,12px);
  border-radius:6px; overflow:hidden; pointer-events:none;
  mix-blend-mode:soft-light;
}
.sweep::before{
  content:""; position:absolute; top:-40%; left:-60%; width:220%; height:180%;
  background:linear-gradient(115deg,rgba(255,250,225,0) 42%,
             rgba(255,250,225,.45) 50%,rgba(255,250,225,0) 58%);
  animation:sweepMove 15s ease-in-out infinite;
}
@keyframes sweepMove{
  0%{transform:translateX(-62%)}
  50%{transform:translateX(62%)}
  100%{transform:translateX(-62%)}
}
.board-wrap::after{
  content:""; position:absolute; inset:-7px; border-radius:16px;
  border:2px solid rgba(168,52,44,0); pointer-events:none;
  transition:border-color .5s ease, box-shadow .5s ease;
}
.board-wrap.won::after{
  border-color:rgba(168,52,44,.55);
  box-shadow:0 0 26px rgba(168,52,44,.35);
  animation:ringPulse 1.9s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{opacity:.95}50%{opacity:.4}}

/* ===== 侧栏 ===== */
.panel{
  flex:0 0 300px; width:300px; position:relative;
  padding:18px 18px 16px;
  border:1px solid rgba(110,80,45,.5); border-radius:6px;
  background:linear-gradient(180deg,rgba(255,251,240,.94),rgba(243,232,211,.92));
  box-shadow:0 20px 40px -26px rgba(60,35,10,.9),
             inset 0 0 0 1px rgba(255,255,255,.6);
  transition:border-color .5s ease;
}
.panel::before{
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px solid rgba(130,95,55,.35); border-radius:3px;
}
.panel.won{border-color:rgba(168,52,44,.6)}
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.tab{
  font-size:15px; padding:9px 4px; letter-spacing:.14em; text-indent:.14em;
  border-radius:5px; border:1px solid rgba(120,90,55,.55); cursor:pointer;
  background:linear-gradient(180deg,#f8f2e4,#e8dbc3); color:#6b5a45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.tab.on{
  color:#f5e8cf; border-color:#452a11;
  background:linear-gradient(180deg,#8c5c33,#68401e);
  box-shadow:inset 0 1px 0 rgba(255,236,204,.35), 0 8px 16px -10px rgba(40,20,0,.95);
}
.turn{display:flex; align-items:center; gap:13px;
      padding-bottom:15px; margin-bottom:14px;
      border-bottom:1px solid rgba(120,90,50,.28)}
.turn-stone-wrap{position:relative; flex:0 0 auto; display:grid; place-items:center}
.turn-stone-wrap::before{
  content:""; position:absolute; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,52,44,.30),rgba(168,52,44,0) 70%);
  animation:turnGlow 2.6s ease-in-out infinite;
}
@keyframes turnGlow{
  0%,100%{transform:scale(.84); opacity:.45}
  50%{transform:scale(1.06); opacity:.95}
}
#turnStone{width:46px; height:46px; display:block; position:relative}
.turn-name{font-size:20px; letter-spacing:.2em}
.turn-sub{margin-top:3px; font-size:12.5px; letter-spacing:.12em; color:var(--ink2)}
.btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.btns.one{grid-template-columns:1fr}
button{
  font:inherit; font-size:16.5px; letter-spacing:.16em; text-indent:.16em;
  padding:11px 6px; color:#f5e8cf; cursor:pointer;
  border:1px solid #452a11; border-radius:5px;
  background:linear-gradient(180deg,#8c5c33,#68401e);
  box-shadow:inset 0 1px 0 rgba(255,236,204,.38), 0 8px 16px -10px rgba(40,20,0,.95);
  touch-action:manipulation; transition:filter .15s ease, transform .06s ease;
}
button:hover{filter:brightness(1.1)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.42; cursor:default; filter:none}
.hint{margin:12px 0 0; font-size:12.5px; line-height:1.85;
      letter-spacing:.08em; color:var(--ink2)}
.sprig{display:block; width:100%; margin:12px 0 0; opacity:.42}

/* 联机表单 */
.field{display:flex; align-items:center; gap:10px; margin:4px 0 12px}
.field label{font-size:14px; letter-spacing:.12em; color:var(--ink2); flex:0 0 auto}
.field input{
  flex:1; min-width:0; font:inherit; font-size:19px;
  letter-spacing:.3em; text-transform:uppercase; text-align:center;
  padding:9px 8px 9px 14px; color:var(--ink);
  background:rgba(255,252,244,.9);
  border:1px solid rgba(120,90,55,.5); border-radius:5px; outline:none;
}
.field input:focus{border-color:var(--red); box-shadow:0 0 0 2px rgba(168,52,44,.15)}
.roomcode{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:12px;
  border:1px dashed rgba(120,90,55,.55); border-radius:5px;
  background:rgba(255,252,244,.7);
}
.roomcode span{font-size:13px; letter-spacing:.12em; color:var(--ink2)}
.roomcode b{font-size:23px; letter-spacing:.3em; margin-left:auto; color:#8a2c22}
.roomcode button{font-size:12.5px; padding:6px 10px; letter-spacing:.08em; text-indent:.08em}
.rows{display:grid; gap:7px; margin-bottom:12px; font-size:14px}
.row{display:flex; justify-content:space-between; color:var(--ink2); letter-spacing:.1em}
.row b{color:var(--ink); font-weight:600}
.row b.on{color:#2f6b3a}
.row b.off{color:#9a6a5a}
.net-hint{margin:10px 0 0; font-size:12px; line-height:1.7;
          letter-spacing:.06em; color:var(--ink2); word-break:break-all}
.net-hint.warn{color:#a8342c}

/* ===== 联机状态与反馈 ===== */
.toasts{
  position:fixed; left:50%; top:clamp(10px,2vh,22px); transform:translateX(-50%);
  z-index:30; display:grid; gap:8px; justify-items:center;
  width:min(92vw,440px); pointer-events:none;
}
.toast{
  pointer-events:auto; max-width:100%;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:5px;
  font-size:14.5px; letter-spacing:.08em; color:var(--ink);
  background:linear-gradient(180deg,rgba(255,251,241,.98),rgba(245,235,215,.98));
  border:1px solid rgba(120,90,55,.6);
  box-shadow:0 16px 32px -16px rgba(60,35,10,.9),
             inset 0 0 0 1px rgba(255,255,255,.75);
  animation:toastIn .26s cubic-bezier(.2,.9,.3,1.15);
}
.toast::before{
  content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:#8a7a62;
}
.toast.ok {border-color:rgba(64,116,74,.7)}
.toast.ok::before {background:#3f7a4a}
.toast.err{border-color:rgba(168,52,44,.75)}
.toast.err::before{background:#a8342c}
.toast.out{animation:toastOut .24s ease forwards}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px)}}

.netline{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  padding:8px 11px; border-radius:5px;
  border:1px solid rgba(120,90,55,.35); background:rgba(255,252,244,.66);
  font-size:13px; letter-spacing:.08em; color:var(--ink2);
}
.dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:#9a8f7d;
     box-shadow:0 0 0 3px rgba(154,143,125,.16)}
.dot.g{background:#3f7a4a; box-shadow:0 0 0 3px rgba(63,122,74,.16)}
.dot.y{background:#c08a2e; box-shadow:0 0 0 3px rgba(192,138,46,.18);
       animation:dotPulse 1.1s ease-in-out infinite}
.dot.r{background:#a8342c; box-shadow:0 0 0 3px rgba(168,52,44,.16)}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.35}}
.netline b{margin-left:auto; font-weight:600; color:var(--ink)}

.spin{
  display:inline-block; width:12px; height:12px; margin-right:8px;
  vertical-align:-2px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#f7ead2;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

button.ghost{
  color:#6b5a45; border-color:rgba(120,90,55,.55);
  background:linear-gradient(180deg,#f8f2e4,#e8dbc3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 8px 16px -12px rgba(60,35,10,.8);
}
button.danger{background:linear-gradient(180deg,#a8453a,#852f28); border-color:#5c1f19}
.field input.bad{border-color:var(--red); animation:shake .32s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
}
ol.steps{margin:10px 0 0; padding-left:1.35em; font-size:12.5px;
         line-height:1.95; letter-spacing:.06em; color:var(--ink2)}
ol.steps li::marker{color:var(--red)}

/* ===== 桌面比例 ===== */
@media (min-width:861px){
  .board-wrap{width:min(100%, calc(100vh - 240px), 640px)}
}
/* ===== 移动端比例 ===== */
@media (max-width:860px){
  body{align-items:flex-start}
  .stage{flex-direction:column; align-items:center}
  .board-wrap{width:min(100%,94vw,78vh); width:min(100%,94vw,78dvh)}
  .panel{width:min(100%,94vw,560px); padding:14px 16px}
  .panel::before{inset:5px}
  #turnStone{width:40px; height:40px}
  .turn-stone-wrap::before{width:48px; height:48px}
  .turn-name{font-size:18px}
  button{font-size:15px; padding:10px 8px; letter-spacing:.1em; text-indent:.1em}
  .roomcode b{font-size:20px}
  .sprig{display:none}
  .hint{font-size:12px}
}
/* ===== 减少动态 ===== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}