/* ============ 令牌：漆案与黄杨木 ============ */
:root{
  --ground:#E7DCC6; --ground-2:#DCCFB4; --panel:rgba(255,255,255,.46);
  --tx:#2A241D; --tx-dim:#6E6355; --line:rgba(42,36,29,.16);
  --board:#DEB57E; --board-2:#CB9C5C; --board-rim:#8C5E31; --grid:#6B4423;
  --bone:#F6E8CA; --bone-2:#E2CCA0; --bone-rim:rgba(90,60,25,.45);
  --cinnabar:#B33127; --ink:#241F1A; --gold:#9A7524;
  --glow:rgba(154,117,36,.30); --shadow:rgba(60,38,14,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14100D; --ground-2:#1D1713; --panel:rgba(255,255,255,.045);
    --tx:#EEE4D2; --tx-dim:#9B8C79; --line:rgba(238,228,210,.13);
    --board:#C69A63; --board-2:#AE834C; --board-rim:#402713; --grid:#573517;
    --bone:#EDDCB6; --bone-2:#D3B88A; --bone-rim:rgba(30,18,6,.5);
    --cinnabar:#C4463A; --ink:#191411; --gold:#CDA751;
    --glow:rgba(205,167,81,.34); --shadow:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ground:#14100D; --ground-2:#1D1713; --panel:rgba(255,255,255,.045);
  --tx:#EEE4D2; --tx-dim:#9B8C79; --line:rgba(238,228,210,.13);
  --board:#C69A63; --board-2:#AE834C; --board-rim:#402713; --grid:#573517;
  --bone:#EDDCB6; --bone-2:#D3B88A; --bone-rim:rgba(30,18,6,.5);
  --cinnabar:#C4463A; --ink:#191411; --gold:#CDA751;
  --glow:rgba(205,167,81,.34); --shadow:rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body{
  background:var(--ground); color:var(--tx); min-height:100vh;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Hiragino Sans GB",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%, var(--ground-2), transparent 60%);
}
.kai{font-family:"KaiTi","STKaiti","Kaiti SC","楷体","Noto Serif CJK SC",serif}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit; cursor:pointer; background:transparent; border:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}

/* ============ 顶栏：标志 + 身份 ============ */
.top{
  display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.logo{font-size:1.32rem; letter-spacing:.26em; text-indent:.26em; white-space:nowrap}
.beta{
  font-size:.6rem; letter-spacing:.24em; text-indent:.24em; color:var(--gold);
  border:1px solid var(--gold); padding:.1rem .38rem .1rem .5rem; border-radius:1px; white-space:nowrap;
}
.role{
  font-size:.7rem; letter-spacing:.16em; padding:.14rem .5rem; border-radius:1px;
  border:1px solid var(--line); color:var(--tx-dim); white-space:nowrap;
}
.role.host{border-color:var(--gold); color:var(--gold)}
.role.guest{border-color:var(--cinnabar); color:var(--cinnabar)}
.me{display:flex; align-items:center; gap:.45rem; margin-left:auto}
.me button{display:flex; align-items:center; gap:.45rem; padding:.2rem .35rem; border-radius:2px}
.me button:hover{background:var(--glow)}
.nick{font-size:.85rem; max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 头像：棋子样式的圆牌，颜色由 id 哈希决定 */
.ava{
  width:1.85rem; height:1.85rem; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.95rem; line-height:1;
  background:radial-gradient(circle at 34% 28%, var(--bone), var(--bone-2) 76%);
  box-shadow:0 1px 0 var(--bone-rim), inset 0 0 0 1px rgba(255,255,255,.35);
  color:var(--av, var(--cinnabar));
}
.ava::after{
  content:""; position:absolute; width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid currentColor; opacity:.5;
}
.ava{position:relative}
.ava.sm{width:1.5rem; height:1.5rem; font-size:.8rem}
.ava.sm::after{width:1.2rem; height:1.2rem}

/* ============ 房间主体 ============ */
.wrap{
  max-width:1080px; margin:0 auto; padding:.9rem 1rem 1.4rem; display:grid; gap:1.2rem;
  grid-template-columns:auto minmax(0,272px); align-items:start; justify-content:center;
}
@media (max-width:880px){ .wrap{grid-template-columns:minmax(0,1fr)} }
.stage{display:flex; flex-direction:column; gap:.5rem; align-items:center}

.seat{
  width:100%; display:flex; align-items:center; gap:.55rem;
  padding:.45rem .7rem; border:1px solid var(--line); border-left:4px solid transparent;
  border-radius:2px; background:var(--panel); transition:background .2s, border-color .2s;
}
.seat.active{background:linear-gradient(90deg,var(--glow),var(--panel) 46%)}
.seat.red.active{border-left-color:var(--cinnabar)}
.seat.blk.active{border-left-color:var(--ink)}
.seat .side{
  font-size:.72rem; letter-spacing:.1em; padding:.08rem .4rem; border-radius:1px; white-space:nowrap;
}
.seat.red .side{color:var(--cinnabar); border:1px solid var(--cinnabar)}
.seat.blk .side{color:var(--tx); border:1px solid var(--tx-dim)}
.seat .who{font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:7rem}
.seat .tag{
  font-size:.64rem; letter-spacing:.14em; color:var(--gold); border:1px solid var(--gold);
  padding:.05rem .35rem; border-radius:1px; opacity:0; transition:opacity .2s; white-space:nowrap;
}
.seat.active .tag{opacity:1}
.graveyard{display:flex; flex-wrap:wrap; gap:.12rem; flex:1; justify-content:flex-end; align-items:center; min-height:1.1rem}
.gy{
  font-size:.74rem; line-height:1.1rem; width:1.1rem; height:1.1rem; text-align:center;
  border-radius:50%; background:var(--bone-2); opacity:.6;
}
.gy.r{color:var(--cinnabar)} .gy.b{color:var(--ink)}
.clock{font-size:1.05rem; padding:.1rem .3rem; white-space:nowrap; border-bottom:2px solid transparent}
.clock.run{border-bottom-color:var(--gold)}
.clock.low{color:var(--cinnabar)}

/* ============ 棋盘 ============ */
.board{
  --cell:min( calc((100vw - 2.5rem)/9.4), calc((100vh - 16rem)/10.4), 54px );
  position:relative; width:calc(9.4*var(--cell)); height:calc(10.4*var(--cell));
  background:linear-gradient(158deg,var(--board),var(--board-2));
  border:1px solid var(--board-rim); border-radius:3px;
  box-shadow:0 18px 40px -22px var(--shadow), inset 0 0 60px rgba(120,80,30,.16);
  touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent;
}
@media (max-width:880px){
  .board{--cell:min( calc((100vw - 2rem)/9.4), calc((100vh - 19rem)/10.4), 46px )}
}
.board > svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.river{font-size:76px; letter-spacing:.4em; fill:var(--grid); opacity:.5}
.trail{opacity:.34}

/* 棋子本身不接收点击，一律交给下面的命中层 */
.pc{
  position:absolute; width:calc(.88*var(--cell)); height:calc(.88*var(--cell));
  left:calc((.7 + var(--f))*var(--cell)); top:calc((.7 + var(--r))*var(--cell));
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  display:grid; place-items:center; font-size:calc(.52*var(--cell)); line-height:1;
  background:radial-gradient(circle at 34% 28%, var(--bone), var(--bone-2) 76%);
  box-shadow:0 2px 0 var(--bone-rim), 0 4px 8px -2px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:left .24s cubic-bezier(.3,.9,.35,1), top .24s cubic-bezier(.3,.9,.35,1),
             box-shadow .16s, opacity .2s, scale .16s;
}
.pc::before{
  content:""; position:absolute; inset:calc(.07*var(--cell)); border-radius:50%;
  border:1px solid currentColor; opacity:.55;
}
.pc.r{color:var(--cinnabar)} .pc.b{color:var(--ink)}
.pc.justmoved{box-shadow:0 0 0 2px currentColor, 0 4px 10px -3px var(--shadow)}
.pc.sel{box-shadow:0 0 0 3px var(--gold), 0 0 0 9px var(--glow), 0 6px 14px -3px var(--shadow); scale:1.07}
.pc.checked{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--cinnabar), 0 0 0 9px var(--glow), 0 4px 10px -2px var(--shadow)}}
.pc.gone{opacity:0; scale:.5}
.pc.dead{display:none}

/* 落点提示：看到的是小圆点，能点的是整格 */
.hit{
  position:absolute; width:var(--cell); height:var(--cell);
  left:calc((.7 + var(--f))*var(--cell)); top:calc((.7 + var(--r))*var(--cell));
  transform:translate(-50%,-50%); border-radius:14%; cursor:pointer;
  display:grid; place-items:center;
}
.hit::after{content:""; border-radius:50%; transition:scale .15s, opacity .15s; scale:0; opacity:0}
.hit.move::after{width:calc(.28*var(--cell)); height:calc(.28*var(--cell)); background:var(--gold); scale:1; opacity:.66}
.hit.take::after{width:calc(1.02*var(--cell)); height:calc(1.02*var(--cell)); border:2px solid var(--gold); scale:1; opacity:.85}
.hit.move:hover::after{scale:1.5}
.board.locked .hit{cursor:default}

/* 将死：帅被劈开 */
.slain{
  position:absolute; width:calc(.88*var(--cell)); height:calc(.88*var(--cell));
  left:calc((.7 + var(--f))*var(--cell)); top:calc((.7 + var(--r))*var(--cell));
  transform:translate(-50%,-50%); pointer-events:none; z-index:3;
}
.slain .hf{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  font-size:calc(.52*var(--cell)); line-height:1;
  background:radial-gradient(circle at 34% 28%, var(--bone), var(--bone-2) 76%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 3px 7px -2px var(--shadow);
}
.slain.r .hf{color:var(--cinnabar)} .slain.b .hf{color:var(--ink)}
.slain .hf.a{
  clip-path:polygon(0 0, 54% 0, 45% 30%, 58% 55%, 43% 78%, 51% 100%, 0 100%);
  animation:splitA 1.1s cubic-bezier(.2,.75,.3,1) .22s both;
}
.slain .hf.b{
  clip-path:polygon(54% 0, 100% 0, 100% 100%, 51% 100%, 43% 78%, 58% 55%, 45% 30%);
  animation:splitB 1.1s cubic-bezier(.2,.75,.3,1) .22s both;
}
@keyframes splitA{to{transform:translate(-42%,30%) rotate(-26deg); opacity:.2}}
@keyframes splitB{to{transform:translate(40%,-16%) rotate(22deg); opacity:.2}}
.slain .slash{
  position:absolute; left:50%; top:-34%; width:3px; height:168%;
  background:linear-gradient(transparent,#FFF4D8,transparent);
  transform:translateX(-50%) rotate(15deg); transform-origin:center;
  filter:drop-shadow(0 0 7px #FFE9A8); animation:slash .5s ease-out both;
}
@keyframes slash{0%{opacity:0; scale:1 .1} 34%{opacity:1; scale:1 1} 100%{opacity:0; scale:1 1}}

/* 开局特效：金光自中线荡开 */
.kickoff{
  position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; border-radius:3px;
}
.kickoff::before{
  content:""; position:absolute; left:-20%; right:-20%; top:50%; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 22px 6px var(--glow); animation:ko .85s ease-out both;
}
@keyframes ko{0%{transform:scaleX(0); opacity:0} 30%{opacity:1} 100%{transform:scaleX(1) scaleY(48); opacity:0}}

/* 棋盘正下方的回看条：宽屏用不着（侧栏就在旁边），窄屏才显示 */
.stepbar{display:none}
@media (max-width:880px){
  .stepbar{
    display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
    padding:.35rem .5rem; border:1px solid var(--line); border-radius:2px; background:var(--panel);
  }
  .stepbar button{
    flex:1; max-width:5.5rem; padding:.45rem 0; border:1px solid var(--line); border-radius:2px;
    font-size:1.15rem; line-height:1;
  }
  .stepbar button:disabled{opacity:.3}
  .stepbar span{font-size:.76rem; color:var(--tx-dim); min-width:5.5rem; text-align:center}
  /* 侧栏里那两个就别重复了 */
  #bPrev, #bNext{display:none}
}

/* ============ 侧栏 ============ */
.rail{display:flex; flex-direction:column; gap:.8rem; width:100%}
.box{border:1px solid var(--line); border-radius:2px; background:var(--panel); padding:.8rem .85rem}
.box h3{
  margin:0 0 .55rem; font-size:.68rem; font-weight:400; letter-spacing:.24em;
  color:var(--tx-dim); text-indent:.24em;
}
.modeline{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.modeline b{font-weight:400; font-size:1.1rem; letter-spacing:.14em}
.modeline span{font-size:.72rem; color:var(--tx-dim)}
#status{margin-top:.45rem; font-size:.8rem; line-height:1.6; color:var(--tx-dim)}
#status.alert{color:var(--cinnabar)}

/* position:relative 是必需的：棋谱行的 offsetTop 要相对这个框来算，
   否则自动滚动会算到整个页面上去 */
#log{position:relative; max-height:min(30vh,262px); overflow-y:auto;
     display:flex; flex-direction:column; gap:.06rem; font-size:.74rem}
#log:empty::after{content:"尚未落子"; color:var(--tx-dim)}
#log div{display:flex; gap:.5rem; padding:.15rem .1rem; border-bottom:1px solid var(--line); cursor:pointer}
#log div.at{background:var(--glow)}
#log i{font-style:normal; color:var(--tx-dim); width:1.7rem; text-align:right}
#log em{font-style:normal; width:1rem}
#log em.r{color:var(--cinnabar)} #log em.b{color:var(--tx)}

.acts{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.acts button{
  padding:.5rem .3rem; border:1px solid var(--line); border-radius:2px;
  font-size:.8rem; letter-spacing:.06em; transition:border-color .18s, color .18s;
}
.acts button:hover:not(:disabled){border-color:var(--gold); color:var(--gold)}
.acts button:disabled{opacity:.32; cursor:not-allowed}
.acts .wide{grid-column:1/-1}

/* ============ 对话框 ============ */
dialog{
  border:1px solid var(--line); border-radius:3px; background:var(--ground); color:var(--tx);
  padding:0; max-width:min(94vw,520px); width:100%;
}
dialog::backdrop{background:rgba(10,7,4,.62); backdrop-filter:blur(2px)}
.dlg{padding:1.35rem 1.35rem 1.15rem; display:flex; flex-direction:column; gap:.85rem}
.dlg h2{margin:0; font-size:1.28rem; font-weight:400; letter-spacing:.16em}
.dlg p{margin:0; font-size:.85rem; line-height:1.7; color:var(--tx-dim)}
.dlg label{font-size:.7rem; letter-spacing:.18em; color:var(--tx-dim)}
.dlg h4{margin:.2rem 0 0; font-size:.7rem; font-weight:400; letter-spacing:.2em; color:var(--tx-dim)}
.dlg textarea, .dlg input[type=text]{
  width:100%; padding:.55rem .7rem; font:inherit; font-size:.85rem;
  background:var(--panel); color:var(--tx); border:1px solid var(--line); border-radius:2px;
}
.dlg textarea{min-height:6.5rem; resize:vertical}
.dlg textarea:focus, .dlg input:focus{outline:none; border-color:var(--gold)}
.row{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end}
.row button{border:1px solid var(--line); padding:.5rem 1.1rem; border-radius:2px; font-size:.85rem}
.row button:hover:not(:disabled){border-color:var(--gold); color:var(--gold)}
.row button:disabled{opacity:.32; cursor:not-allowed}
.row button.pri{border-color:var(--gold); color:var(--gold)}
.row button.pri:hover:not(:disabled){background:var(--gold); color:var(--ground)}
.big{font-size:1.55rem; letter-spacing:.14em; text-align:center; padding:.3rem 0}
.note{font-size:.74rem; color:var(--tx-dim); line-height:1.6}
.hintline{font-size:.78rem; color:var(--gold); min-height:1.1rem}

/* 模式卡片与选项条 */
.cards{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.card{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.9rem .7rem .8rem; border:1px solid var(--line); border-radius:2px;
  background:var(--panel); text-align:center; transition:border-color .2s, transform .2s;
}
.card:hover{border-color:var(--gold); transform:translateY(-2px)}
.card[aria-pressed="true"]{
  border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold);
  background:linear-gradient(var(--glow),var(--panel) 60%);
}
.card .mini{width:56px; height:64px; display:block}
.card .nm{font-size:1.1rem; letter-spacing:.16em; text-indent:.16em}
.card .ds{font-size:.74rem; line-height:1.55; color:var(--tx-dim)}
.card .pos{font-size:.66rem; color:var(--gold)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  padding:.36rem .75rem; border:1px solid var(--line); border-radius:2px;
  font-size:.8rem; transition:border-color .18s, color .18s, background .18s;
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{border-color:var(--gold); color:var(--gold); background:var(--glow)}

/* 开局弹窗里的对阵双方 */
.vs{display:flex; align-items:center; justify-content:center; gap:.9rem; padding:.4rem 0}
.vs .p{display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:5.5rem}
.vs .p .nm{font-size:.86rem; max-width:6.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vs .p .sd{font-size:.68rem; letter-spacing:.1em; padding:.05rem .4rem; border-radius:1px}
.vs .p .sd.r{color:var(--cinnabar); border:1px solid var(--cinnabar)}
.vs .p .sd.b{color:var(--tx); border:1px solid var(--tx-dim)}
.vs .p .ok{font-size:.68rem; color:var(--gold); min-height:1rem}
.vs .x{color:var(--tx-dim); font-size:.8rem; letter-spacing:.1em}

/* 历史对局列表 */
.hislist{max-height:min(52vh,380px); overflow-y:auto; display:flex; flex-direction:column; gap:.4rem}
.hislist:empty::after{content:"還沒有下完的對局"; color:var(--tx-dim); font-size:.85rem}
.his{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; text-align:left;
  border:1px solid var(--line); border-radius:2px; transition:border-color .18s, background .18s;
}
.his:hover{border-color:var(--gold); background:var(--glow)}
.his .md{font-size:.9rem; letter-spacing:.1em; white-space:nowrap}
.his .info{display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1}
.his .opp{font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.his .sub{font-size:.7rem; color:var(--tx-dim)}
.his .res{font-size:.78rem; white-space:nowrap; padding:.1rem .45rem; border-radius:1px; border:1px solid currentColor}
.his .res.win{color:var(--gold)}
.his .res.lose{color:var(--tx-dim)}
.his .res.draw{color:var(--tx-dim)}

/* 倒计时环 */
.countdown{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--gold);
}
.countdown b{font-weight:400; font-size:1.05rem; min-width:1.2rem; text-align:center}

/* 规则页 */
.rules{max-height:min(60vh,460px); overflow-y:auto; font-size:.84rem; line-height:1.8}
.rules h4{margin:.9rem 0 .3rem; color:var(--gold); letter-spacing:.14em}
.rules ul{margin:.2rem 0; padding-left:1.2rem}
.rules li{margin:.16rem 0}
.rules code{
  font-family:ui-monospace,Consolas,monospace; font-size:.9em;
  background:var(--panel); padding:.05rem .3rem; border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}