/* 布局构想：一张胡桃木案几，左摆棋盘，右铺宣纸战报；选关是一卷从右往左读的竹简。只此一种面貌，不分昼夜。 */
:root{
  color-scheme:dark;
  --desk:#231711; --desk-2:#32221a; --desk-line:#4b3527;
  --paper:#dcc9a0; --paper-2:#cbb383; --paper-edge:#a88c58;
  --ink:#1f1712; --ink-soft:#5a4838;
  --cinnabar:#a52e1e; --cinnabar-deep:#7d1f13;
  --bamboo:#bfa266; --bamboo-2:#a3864c; --bamboo-dark:#6f5630;
  --board:#cda868; --board-2:#b88f50; --line:#4a2e18;
  --gold:#dbb96e; --gold-dim:#a58a55;
  --piece-hi:#f1dfb4; --piece-mid:#d6b577; --piece-lo:#a67f45; --piece-side:#6b4c27;
  --f-brush:"Ma Shan Zheng","LXGW WenKai TC","KaiTi","STKaiti",serif;
  --f-kai:"LXGW WenKai TC","KaiTi","STKaiti","Noto Serif SC",serif;
  --f-body:"Noto Serif SC","Songti SC","SimSun",serif;
}
*{box-sizing:border-box}
body{
  background:var(--desk);
  background-image:repeating-linear-gradient(92deg,transparent 0 37px,rgba(0,0,0,.13) 37px 38px,transparent 38px 91px,rgba(255,220,160,.025) 91px 93px);
  color:var(--paper); font:15px/1.75 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:18px 40px; min-height:100%;
}
.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--desk-line);padding-bottom:10px}
h1{font:400 40px/1.1 var(--f-brush);margin:0;color:var(--gold);letter-spacing:.08em}
header p{margin:0;color:var(--gold-dim);font-size:14px}
h2{font:400 26px/1.2 var(--f-brush);margin:0;color:var(--gold);letter-spacing:.06em}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* —— 竹简选关 —— */
.lead{max-width:38em;margin:0;color:var(--paper-2)}
.slips{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:center;gap:5px;padding:14px 0}
.slip{
  position:relative;width:66px;height:262px;border:0;padding:34px 0 30px;
  writing-mode:vertical-rl;text-orientation:upright;text-align:start;
  color:var(--ink);border-radius:3px;
  background:
    linear-gradient(var(--bamboo-dark),var(--bamboo-dark)) 0 20px/100% 3px no-repeat,
    linear-gradient(var(--bamboo-dark),var(--bamboo-dark)) 0 calc(100% - 20px)/100% 3px no-repeat,
    linear-gradient(90deg,var(--bamboo-2),var(--bamboo) 30%,var(--bamboo) 70%,var(--bamboo-2));
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .18s;
}
.slip:hover:not(.locked){transform:translateY(-6px)}
.slip .no{font:400 13px var(--f-body);color:var(--ink-soft);letter-spacing:.2em}
.slip .ti{font:400 25px/1.15 var(--f-brush);letter-spacing:.1em}
.slip .op{font-size:12px;color:var(--ink-soft);letter-spacing:.15em}
.slip.locked{filter:brightness(.55) saturate(.6);cursor:not-allowed}
.slip .stamp{
  position:absolute;bottom:30px;left:50%;translate:-50% 0;rotate:-8deg;writing-mode:horizontal-tb;
  width:28px;height:28px;display:grid;place-items:center;border-radius:3px;
  font:400 17px/1 var(--f-brush);color:var(--paper);background:var(--cinnabar);opacity:.92;
}
.slip.locked .stamp{background:var(--ink-soft)}
.foot{color:var(--gold-dim);font-size:13px;margin:0}

/* —— 对局 —— */
.gamegrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.boardcol{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:0}
.hud{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hud span{color:var(--gold-dim);font-size:13px;font-variant-numeric:tabular-nums}
.board{
  position:relative;width:100%;max-width:min(560px,calc((100dvh - 190px)*.9));min-width:260px;aspect-ratio:9/10;
  container-type:inline-size;border-radius:6px;cursor:pointer;touch-action:manipulation;
  background:linear-gradient(135deg,var(--board),var(--board-2));
  box-shadow:0 0 0 5px var(--line),0 0 0 9px var(--bamboo-dark),0 14px 30px rgba(0,0,0,.6);
}
.board svg{position:absolute;inset:0;width:100%;height:100%}
.board svg .ln{stroke:var(--line);stroke-width:2.2;fill:none}
.board svg text{font:700 54px var(--f-kai);fill:var(--line);opacity:.62}
.layer{position:absolute;inset:0;pointer-events:none}
.piece{
  position:absolute;width:10.3%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle at 35% 28%,var(--piece-hi),var(--piece-mid) 58%,var(--piece-lo));
  box-shadow:0 2px 0 var(--piece-side),0 4px 7px rgba(0,0,0,.5);
  display:grid;place-items:center;font:700 26px/1 var(--f-kai);font-size:6.3cqw;
  transition:left .26s ease,top .26s ease,scale .15s;
}
.piece::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1.5px solid currentColor;opacity:.7}
.piece.red{color:var(--cinnabar)} .piece.black{color:var(--ink)}
.piece.sel{scale:1.1;box-shadow:0 2px 0 var(--piece-side),0 0 0 3px var(--gold),0 8px 12px rgba(0,0,0,.55);z-index:3}
.piece.chk{animation:chk .7s ease-in-out infinite alternate}
.piece.vine::after{border:2.5px double #3f6a2c;opacity:1}
.piece.hare::after{border:2.5px double var(--cinnabar);opacity:1}
@keyframes chk{to{box-shadow:0 2px 0 var(--piece-side),0 0 0 4px var(--cinnabar),0 0 18px 6px rgba(200,50,30,.7)}}
.mk{position:absolute;translate:-50% -50%;border-radius:50%}
.mk.dot{width:3.2%;aspect-ratio:1;background:var(--cinnabar-deep);opacity:.75}
.mk.cap{width:11.6%;aspect-ratio:1;border:3px solid var(--cinnabar);z-index:4}
.mk.last{width:11.4%;aspect-ratio:1;border:2px dashed var(--ink-soft);border-radius:8px}
.mk.hint{width:11.6%;aspect-ratio:1;border:3px solid var(--gold);box-shadow:0 0 12px var(--gold);z-index:4}
.shout{
  position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none;white-space:nowrap;
  font:400 78px/1 var(--f-brush);font-size:20cqw;color:var(--cinnabar);opacity:0;z-index:6;
  text-shadow:0 0 2px var(--paper),0 0 22px var(--paper),0 0 40px var(--paper);
}
.shout.go{animation:shout 1.3s ease-out}
@keyframes shout{0%{opacity:0;scale:1.8}18%{opacity:1;scale:1}70%{opacity:1}100%{opacity:0;scale:1.05}}
.status{min-height:1.75em;margin:0;color:var(--gold);text-align:center}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.btn{
  border:1px solid var(--gold-dim);background:var(--desk-2);color:var(--gold);
  padding:5px 13px;border-radius:3px;font-size:14px;letter-spacing:.08em;
}
.btn:hover:not(:disabled){background:var(--desk-line)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.seal{background:var(--cinnabar);border-color:var(--cinnabar-deep);color:var(--paper)}
.btn.seal:hover:not(:disabled){background:var(--cinnabar-deep)}

aside{display:flex;flex-direction:column;gap:14px;min-width:0}
.sheet{
  background:var(--paper);color:var(--ink);padding:14px 16px;border-radius:2px;
  box-shadow:inset 0 0 40px rgba(120,85,40,.28),0 6px 16px rgba(0,0,0,.45);
}
.foe{display:flex;gap:12px;align-items:center}
.avatar{
  flex:none;width:58px;height:58px;display:grid;place-items:center;rotate:-4deg;
  background:var(--cinnabar);color:var(--paper);font:400 40px/1 var(--f-brush);border-radius:5px;
  box-shadow:inset 0 0 0 3px var(--cinnabar),inset 0 0 0 4.5px var(--paper);
}
.foe b{font:400 24px/1.2 var(--f-brush);display:block}
.foe small{color:var(--ink-soft);font-size:12.5px}
.bubble{margin:12px 0 0;padding:9px 12px;border-left:3px solid var(--cinnabar);background:rgba(120,85,40,.14);font-family:var(--f-kai);font-size:15.5px;line-height:1.6;min-height:4.2em}
.bubble.pop{animation:pop .3s ease-out}
@keyframes pop{from{opacity:.2;translate:0 4px}}
.rule{margin:10px 0 0;font-size:13px;color:var(--ink-soft)}
.rule b{color:var(--cinnabar-deep)}
.sheet h3{margin:0 0 6px;font:400 19px var(--f-brush);letter-spacing:.1em;display:flex;justify-content:space-between;align-items:baseline}
.sheet h3 span{font:13px var(--f-body);color:var(--ink-soft);letter-spacing:0}
.pouches{display:flex;gap:6px;margin-bottom:10px}
.pouch{width:30px;height:34px;border-radius:9px 9px 13px 13px;background:var(--cinnabar);color:var(--paper);display:grid;place-items:center;font:400 17px/1 var(--f-brush);box-shadow:inset 0 5px 0 var(--cinnabar-deep)}
.pouch.used{background:transparent;color:var(--paper-edge);box-shadow:inset 0 0 0 1.5px var(--paper-edge)}
.sheet .btn{background:transparent;color:var(--ink);border-color:var(--ink-soft)}
.sheet .btn:hover:not(:disabled){background:rgba(120,85,40,.2)}
.log{margin:0;padding:0;list-style:none;max-height:190px;overflow-y:auto;font:14px/1.9 var(--f-kai);font-variant-numeric:tabular-nums}
.log li{display:grid;grid-template-columns:2.2em 1fr 1fr;border-bottom:1px dotted var(--paper-edge)}
.log li i{font-style:normal;color:var(--ink-soft)}
.log li span:first-of-type{color:var(--cinnabar-deep)}
.log:empty::before{content:"尚未落子。主公执红先行。";color:var(--ink-soft);font-size:13px}

/* —— 卷轴弹层 —— */
.veil{position:fixed;inset:0;background:rgba(15,9,6,.72);display:grid;place-items:center;z-index:20;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.scroll{
  width:min(100%,500px);max-height:100%;overflow-y:auto;background:var(--paper);color:var(--ink);
  padding:22px 26px;border-block:12px solid var(--bamboo-dark);
  box-shadow:inset 0 0 60px rgba(120,85,40,.3),0 20px 50px rgba(0,0,0,.7);animation:pop .3s ease-out;
}
.scroll h2{color:var(--cinnabar-deep);font-size:34px;text-align:center;margin-bottom:10px}
.scroll p{margin:0 0 10px}
.scroll .quote{font-family:var(--f-kai);border-left:3px solid var(--cinnabar);padding-left:10px}
.scroll .ruleline{font-size:13.5px;background:rgba(120,85,40,.16);padding:8px 10px}
.scroll .ruleline b{color:var(--cinnabar-deep)}
.scroll .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.scroll .btn{background:transparent;color:var(--ink);border-color:var(--ink-soft)}
.scroll .btn:hover{background:rgba(120,85,40,.2)}
.scroll .btn.seal{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar-deep)}
.scroll .btn.seal:hover{background:var(--cinnabar-deep)}

@media (max-width:820px){
  .gamegrid{grid-template-columns:minmax(0,1fr)}
  h1{font-size:32px}
  .slip{width:60px;height:236px}
  .slip .ti{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}