:root{--ink: #1a120b;--lacquer: #8b1a1a;--lacquer-deep: #5c0f0f;--wood: #c4a574;--wood-dark: #8b6914;--board: #d4b896;--board-line: #3d2914;--river: #6b4f2a;--cream-piece: #f3e6c8;--black-piece: #1e1a16;--gold: #c9a227;--mist: rgba(26, 18, 11, .55);--panel: rgba(28, 18, 12, .82);--text: #f5ebd8;--muted: #b8a890;--ok: #2d6a4f;--danger: #9b2226;--font-display: "ZCOOL XiaoWei", "Noto Serif SC", serif;--font-body: "Noto Serif SC", "Songti SC", serif;color:var(--text);font-family:var(--font-body);line-height:1.55;font-weight:500;background:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(139,26,26,.35),transparent 55%),radial-gradient(ellipse 50% 40% at 100% 100%,rgba(201,162,39,.12),transparent 50%),linear-gradient(165deg,#120c08,#1a120b 40%,#0d0a07);background-attachment:fixed}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;border-bottom:1px solid rgba(201,162,39,.22);background:#0c0805a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}.topnav-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.lang-switcher select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff14;border:1px solid rgba(201,162,39,.28);color:var(--text);font:inherit;font-size:.85rem;padding:6px 28px 6px 10px;border-radius:8px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.lang-switcher select:hover,.lang-switcher select:focus{border-color:var(--gold);outline:none}.brand{font-family:var(--font-display);font-size:1.45rem;letter-spacing:.12em;color:var(--gold);display:flex;align-items:baseline;gap:.35rem}.brand span{font-size:.75rem;letter-spacing:.2em;color:var(--muted)}.nav-links{display:flex;flex-wrap:wrap;gap:.35rem .85rem;font-size:.92rem}.nav-links a{color:var(--muted);transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--text)}.main{flex:1;width:min(1120px,100%);margin:0 auto;padding:1.25rem 1rem 3rem}.hero{position:relative;min-height:min(78vh,640px);display:grid;align-items:end;padding:2.5rem 0 2rem;overflow:hidden}.hero:before{content:"";position:absolute;inset:-10% -5% auto;height:85%;background:linear-gradient(180deg,transparent 0%,rgba(18,12,8,.15) 40%,rgba(18,12,8,.92) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Crect fill='%233d2914' width='800' height='500'/%3E%3Cpath stroke='%23c4a574' stroke-width='2' fill='none' d='M80 60h640v380H80z'/%3E%3Cg stroke='%23b8956a' stroke-width='1.2'%3E%3Cpath d='M80 98h640M80 136h640M80 174h640M80 212h640M80 250h640M80 288h640M80 326h640M80 364h640M80 402h640'/%3E%3Cpath d='M151 60v380M222 60v380M293 60v380M364 60v380M435 60v380M506 60v380M577 60v380M648 60v380'/%3E%3C/g%3E%3Ctext x='400' y='255' text-anchor='middle' fill='%236b4f2a' font-size='28' font-family='serif'%3E楚河　汉界%3C/text%3E%3C/svg%3E") center 20% / cover no-repeat;opacity:.9;animation:hero-drift 18s ease-in-out infinite alternate;pointer-events:none}@keyframes hero-drift{0%{transform:scale(1.02) translateY(0)}to{transform:scale(1.06) translateY(-12px)}}.hero-copy{position:relative;z-index:1;max-width:34rem;animation:rise .9s ease both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.hero h1{font-family:var(--font-display);font-size:clamp(2.6rem,8vw,4.2rem);font-weight:400;letter-spacing:.18em;margin:0 0 .6rem;color:var(--gold);text-shadow:0 2px 24px rgba(0,0,0,.45)}.hero p{margin:0 0 1.4rem;color:var(--muted);font-size:1.05rem;max-width:28rem}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid rgba(201,162,39,.45);background:linear-gradient(180deg,#9e2424,#6e1414);color:var(--text);padding:.65rem 1.25rem;border-radius:2px;letter-spacing:.08em;transition:transform .15s,box-shadow .2s,filter .2s}.btn:hover{filter:brightness(1.08);box-shadow:0 6px 20px #8b1a1a59}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent;border-color:#f5ebd847}.btn.ghost:hover{border-color:var(--gold);box-shadow:none}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}.section{margin-top:2.75rem;animation:rise .7s ease both}.section h2{font-family:var(--font-display);font-size:1.75rem;letter-spacing:.14em;font-weight:400;margin:0 0 .4rem;color:var(--gold)}.section .lead{margin:0 0 1.25rem;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.feature-link{display:block;padding:1.15rem 1rem 1.25rem;border-top:1px solid rgba(201,162,39,.35);background:linear-gradient(180deg,rgba(60,30,20,.25),transparent);transition:background .25s,transform .2s}.feature-link:hover{background:linear-gradient(180deg,rgba(139,26,26,.28),transparent);transform:translateY(-2px)}.feature-link h3{margin:0 0 .35rem;font-family:var(--font-display);font-size:1.25rem;font-weight:400;letter-spacing:.1em}.feature-link p{margin:0;color:var(--muted);font-size:.9rem}.panel{background:var(--panel);border:1px solid rgba(201,162,39,.2);padding:1.1rem 1.15rem}.page-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:.14em;font-weight:400;color:var(--gold);margin:0 0 .35rem}.page-desc{color:var(--muted);margin:0 0 1.25rem}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:1.25rem;align-items:start}@media (max-width: 860px){.game-layout{grid-template-columns:1fr}.nav-links{font-size:.8rem}}.side-panel{display:flex;flex-direction:column;gap:.85rem}.side-panel h3{margin:0 0 .5rem;font-family:var(--font-display);font-weight:400;letter-spacing:.1em;font-size:1.1rem;color:var(--gold)}.move-list{max-height:280px;overflow:auto;font-size:.9rem;line-height:1.7}.move-list .active{color:var(--gold)}.status-banner{padding:.55rem .75rem;border-left:3px solid var(--gold);background:#c9a22714;margin-bottom:.75rem;font-size:.95rem}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}.field label{color:var(--muted);font-size:.85rem}.field input,.field select{background:#00000059;border:1px solid rgba(245,235,216,.2);color:var(--text);padding:.55rem .7rem;border-radius:2px}.list-cards{display:grid;gap:.75rem}.list-card{display:block;padding:1rem;border-left:2px solid var(--lacquer);background:#00000047;transition:border-color .2s,background .2s}.list-card:hover{border-color:var(--gold);background:#8b1a1a2e}.list-card h3{margin:0 0 .25rem;font-family:var(--font-display);font-weight:400;letter-spacing:.08em}.list-card p{margin:0;color:var(--muted);font-size:.9rem}.tag{display:inline-block;font-size:.75rem;letter-spacing:.06em;color:var(--gold);margin-bottom:.35rem}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}.board-wrap{width:min(100%,520px);margin:0 auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.board-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}.piece{cursor:pointer;transition:transform .12s}.piece:hover{filter:brightness(1.08)}.piece.selected{filter:drop-shadow(0 0 6px rgba(201,162,39,.85))}.footer-note{margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(201,162,39,.15);color:var(--muted);font-size:.8rem;text-align:center;letter-spacing:.06em}.toast{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--gold);padding:.65rem 1.1rem;z-index:50;animation:rise .25s ease}.steps{display:flex;flex-direction:column;gap:.75rem}.step{padding:.85rem 1rem;border-left:2px solid rgba(201,162,39,.35);background:#00000038}.step.active{border-left-color:var(--lacquer);background:#8b1a1a33}.step h4{margin:0 0 .3rem;font-family:var(--font-display);font-weight:400;letter-spacing:.08em}.step p{margin:0;color:var(--muted);font-size:.92rem}