:root { --ink:#25231f; --paper:#f2eee4; --wood:#d8aa67; --red:#a74836; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color:var(--ink); font-family:"Microsoft YaHei",system-ui,sans-serif; background:radial-gradient(circle at 20% 20%,#faf7ef 0,transparent 35%),linear-gradient(135deg,#e8e1d3,#f7f4ed); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.game-shell { width:min(1180px,94vw); min-height:100vh; margin:auto; display:grid; grid-template-columns:300px minmax(0,720px); gap:70px; align-items:center; justify-content:center; padding:42px 0; }
.eyebrow { font:600 11px/1.4 Georgia,serif; letter-spacing:.28em; color:var(--red); }
h1 { margin:12px 0 14px; font:500 clamp(64px,8vw,100px)/.95 "KaiTi","STKaiti",serif; letter-spacing:.04em; }
.intro>p { line-height:1.9; color:#686258; font-size:14px; max-width:260px; }
.scoreboard { display:flex; align-items:center; gap:24px; margin:42px 0 30px; }
.scoreboard div { display:flex; flex-direction:column; gap:4px; }
.scoreboard strong { font:500 32px/1 Georgia,serif; }
.scoreboard span { font-size:11px; color:#80796e; }
.scoreboard i { width:1px; height:38px; background:#c8c0b2; }
button { border:0; cursor:pointer; font:600 13px inherit; letter-spacing:.08em; transition:.2s; }
.restart { padding:13px 18px; background:transparent; border:1px solid #aba397; color:#4a4640; }
.restart:hover { background:var(--ink); color:white; transform:translateY(-2px); }
.restart span { margin-left:20px; }
.board-card { width:100%; overflow:hidden; background:rgba(255,255,255,.48); box-shadow:0 24px 70px rgba(54,44,29,.16); border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(8px); }
.board-card header { height:76px; padding:0 28px; display:flex; align-items:center; gap:13px; border-bottom:1px solid #ddd6ca; }
.turn-mark { width:18px; height:18px; border-radius:50%; box-shadow:0 2px 5px #777; background:#222; }
.turn-mark.white { background:#f8f5ed; border:1px solid #aaa; }
.label { display:block; font-size:10px; color:#8a8378; letter-spacing:.12em; }
#status { font:500 14px "KaiTi",serif; }
.thinking { display:none; margin-left:auto; gap:4px; }
.thinking.show { display:flex; }
.thinking i { width:4px; height:4px; background:#82796d; border-radius:50%; animation:pulse 1s infinite; }.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes pulse { 50% { transform:translateY(-5px); opacity:.35; } }
.board-wrap { padding:22px; background:linear-gradient(135deg,#dcb375,#cc9854); }
canvas { display:block; width:100%; height:auto; cursor:crosshair; touch-action:manipulation; }
.board-card footer { height:48px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#777064; font-size:11px; }
.result { position:fixed; inset:0; display:grid; place-items:center; background:rgba(30,27,23,.62); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:.3s; z-index:5; }
.result.show { opacity:1; visibility:visible; }
.result-box { width:min(360px,88vw); padding:42px; text-align:center; background:var(--paper); box-shadow:0 30px 80px #1118; transform:translateY(15px); transition:.3s; }
.result.show .result-box { transform:none; }
.result-box>span { display:grid; place-items:center; width:58px; height:58px; margin:auto; border-radius:50%; background:var(--red); color:white; font:32px "KaiTi"; }
.result h2 { margin:20px 0 8px; font:500 26px "KaiTi"; }.result p{color:#746d63;font-size:13px}.result button{margin-top:18px;padding:13px 30px;background:var(--ink);color:white}.result button:hover{background:var(--red)}
@media(max-width:850px){.game-shell{display:block;padding:28px 0}.intro{text-align:center;margin-bottom:28px}.intro>p{margin:10px auto}.scoreboard{justify-content:center;margin:22px 0}.board-card{max-width:680px;margin:auto}h1{font-size:64px}}