:root{--page: #f7f9fc;--surface: #ffffff;--surface-soft: #f1f5fb;--surface-raised: #e9eef6;--ink: #33435b;--ink-strong: #22324a;--ink-muted: #7c8ba3;--line: #d6deea;--line-strong: #405673;--blue: #2f64b3;--blue-2: #5d82c9;--blue-soft: #dce9f8;--blue-pale: #edf4fc;--cao: #b9d7f1;--guan: #efe5d6;--vert: #e7eef7;--soldier: #f3f6fa;--accent-warm: #7b1fd1;--success: #43a276;--danger: #d85858;--shadow: 0 18px 45px rgba(40, 59, 88, .12);--small-shadow: 0 8px 20px rgba(35, 54, 83, .1);--cell: 60px;--pad: 6px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;min-height:100%}body{font-family:ui-rounded,Avenir Next,Trebuchet MS,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--page);color:var(--ink);min-height:100dvh;overscroll-behavior:none}button,select{font:inherit}#app{min-height:100dvh;display:flex;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.wrapper{width:min(100%,1010px);min-height:100dvh;padding:26px 22px 34px;display:grid;grid-template-columns:minmax(320px,1fr) 236px;grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:16px;row-gap:14px;align-items:start}.header{position:relative;grid-column:1 / -1;display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:20px;min-height:54px;padding-bottom:12px;border-bottom:0}.header:after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:1px;transform:translate(-50%);background:var(--line)}.header h1{position:relative;margin:0;padding-left:26px;color:var(--ink-strong);font-size:1.34rem;line-height:1;font-weight:800;letter-spacing:0}.header h1:before{content:"";position:absolute;left:0;top:50%;width:16px;height:12px;transform:translateY(-50%);background:linear-gradient(var(--ink-muted),var(--ink-muted)) 0 0 / 16px 2px,linear-gradient(var(--ink-muted),var(--ink-muted)) 0 5px / 16px 2px,linear-gradient(var(--ink-muted),var(--ink-muted)) 0 10px / 16px 2px;background-repeat:no-repeat;opacity:.9}.language-select{min-height:34px;min-width:116px;background-color:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:5px;padding:6px 30px 6px 11px;font-size:.82rem;font-weight:800;outline:none;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px var(--line);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='%237c8ba3' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.language-select:focus{box-shadow:inset 0 0 0 2px var(--blue-2)}.stats{display:flex;gap:10px;align-items:stretch}.stat{min-width:66px;padding:4px 10px 6px;text-align:center;border-radius:8px;background:var(--surface-soft);border:1px solid transparent}.stat-label{display:block;margin-bottom:1px;color:var(--ink-muted);font-size:.7rem;font-weight:700}.stat-val{color:var(--blue);font-size:1.08rem;line-height:1.05;font-weight:800;font-variant-numeric:tabular-nums}.level-bar{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px}.level-bar select{min-height:36px;background-color:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:5px;padding:7px 30px 7px 12px;font-size:.9rem;font-weight:700;outline:none;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px var(--line);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='%237c8ba3' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}.level-bar select:focus{box-shadow:inset 0 0 0 2px var(--blue-2)}#level-select{flex:0 1 230px;min-width:176px}#difficulty-select{flex:0 0 94px}#generate-btn{min-height:36px;border:0;border-radius:5px;padding:0 13px;font-size:.88rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}#generate-btn{background:linear-gradient(180deg,#8b2be8,#6411bd);color:#fff;box-shadow:0 3px #4d0798}#generate-btn:hover{transform:translateY(-1px)}#generate-btn:active{transform:translateY(2px);box-shadow:0 1px #4d0798}#generate-btn:disabled{opacity:.55;cursor:wait;transform:none}.board-area{position:relative;grid-column:1;grid-row:3 / 5;display:flex;justify-content:flex-end;align-items:flex-start;min-width:0}.board-area:before{content:none}.board{position:relative;width:calc(var(--cell) * 4 + var(--pad) * 2);height:calc(var(--cell) * 5 + var(--pad) * 2);padding:var(--pad);background:#f8fbff;border-radius:0;box-shadow:none;touch-action:none;user-select:none}.board:before{content:"";position:absolute;inset:var(--pad);border:2px solid var(--line-strong);border-bottom:0;pointer-events:none;z-index:3}.board:after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);height:2px;background:linear-gradient(90deg,var(--line-strong) 0,var(--line-strong) 25%,transparent 25%,transparent 75%,var(--line-strong) 75%,var(--line-strong) 100%);pointer-events:none;z-index:4}.grid-bg{position:absolute;inset:var(--pad);background-color:#fbfdff;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--cell) var(--cell),var(--cell) var(--cell);background-position:0 0;border-radius:0}.exit{position:absolute;bottom:var(--pad);left:calc(var(--cell) * 1 + var(--pad));width:calc(var(--cell) * 2);height:2px;background:transparent;border-radius:0;box-shadow:none;pointer-events:none;z-index:1}.pieces{position:absolute;inset:var(--pad);z-index:2}.piece{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px;text-align:center;border-radius:0;border:1px solid rgba(86,107,136,.18);background:var(--vert);color:var(--ink-strong);cursor:grab;font-size:clamp(.78rem,calc(var(--cell) * .26),1.34rem);font-weight:500;letter-spacing:0;line-height:1.12;text-shadow:none;box-shadow:inset 0 0 0 1px #ffffff85;transition:transform .18s cubic-bezier(.34,1.2,.64,1),background .14s ease,color .14s ease,box-shadow .14s ease;will-change:transform}.piece:after{content:none}.piece:active{cursor:grabbing}.piece.cao{background:var(--cao);color:#314765;font-size:clamp(.92rem,calc(var(--cell) * .3),1.58rem);font-weight:700}.piece.guan{background:var(--guan)}.piece.vert,.piece.vert.v2,.piece.vert.v3,.piece.vert.v4{background:var(--vert)}.piece.soldier{background:var(--soldier);font-size:clamp(.68rem,calc(var(--cell) * .22),1.08rem)}.piece.selected{z-index:5;color:#1d4f91;background:#d8eafa;box-shadow:inset 0 0 0 3px #2f64b357}.piece.hint{animation:hintPulse .9s ease-in-out infinite alternate}@keyframes hintPulse{0%{box-shadow:inset 0 0 0 3px #2f64b357}to{box-shadow:inset 0 0 0 4px #2f64b3b3,0 0 0 5px #5d82c933}}.piece.winning{z-index:8;transition:transform .7s cubic-bezier(.5,0,.75,0)}.controls{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-self:start;margin-top:118px}.controls:before{content:attr(data-label);grid-column:1 / -1;margin-bottom:2px;color:var(--ink-muted);font-size:.8rem;font-weight:800;text-align:center}.controls button{min-height:58px;border:0;border-radius:50%;background:var(--surface-raised);color:var(--blue);font-size:0;font-weight:800;cursor:pointer;box-shadow:none;transition:transform .12s ease,background .12s ease,color .12s ease}.controls button:first-letter{font-size:1.45rem}.controls button:hover:not(:disabled){background:var(--blue-soft);transform:translateY(-1px)}.controls button:active:not(:disabled){transform:translateY(1px)}.controls button:disabled{opacity:.4;cursor:not-allowed}.help{grid-column:1;grid-row:4;justify-self:flex-end;width:calc(var(--cell) * 4 + var(--pad) * 2);margin:16px 0 0;padding:0;color:var(--ink-muted);font-size:.82rem;line-height:1.6;text-align:left}.help strong{display:block;margin-bottom:7px;color:var(--ink);font-size:.94rem;font-weight:800}.help strong:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--success);vertical-align:1px}.help span{display:block}.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:#16223257;backdrop-filter:blur(4px)}.overlay.hidden{display:none}.modal{width:min(100%,360px);padding:28px 24px;background:var(--surface);border-radius:8px;text-align:center;box-shadow:var(--shadow);animation:pop .25s ease}@keyframes pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.modal h2{margin:0 0 8px;color:var(--ink-strong);font-size:1.55rem}.modal p{margin:6px 0;color:var(--ink-muted)}.modal .record{color:var(--success);font-weight:800;font-size:1.05rem}.modal .best-info{font-size:.85rem}.modal-actions{display:flex;gap:8px;margin-top:18px}.modal-actions button{flex:1;min-height:46px;background:var(--blue-2);color:#fff;border:0;border-radius:5px;padding:12px;font-size:.95rem;font-weight:800;cursor:pointer}.toast{position:fixed;bottom:24px;left:50%;z-index:200;transform:translate(-50%) translateY(20px);max-width:min(88vw,420px);background:#26364f;color:#fff;padding:11px 18px;border-radius:5px;box-shadow:var(--small-shadow);font-size:.9rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 760px){body{background:var(--page)}.wrapper{width:100%;min-height:100dvh;padding:14px 12px 24px;display:flex;flex-direction:column;align-items:stretch;gap:12px}.header{grid-template-columns:minmax(0,1fr) auto;gap:10px;width:100%;min-width:0}.header h1{min-width:0}.language-select{justify-self:end}.stats{grid-column:1 / -1;width:100%;justify-content:space-between;gap:8px}.stat{flex:1;min-width:0}.level-bar{justify-content:stretch;flex-wrap:nowrap;width:100%;min-width:0}#level-select{flex:1 1 auto;min-width:0}#difficulty-select{flex:0 0 104px;min-width:0}#generate-btn{flex:0 0 auto;min-width:60px}.board-area{justify-content:center;width:100%;min-width:0}.board-area:before{display:none}.controls{display:flex;gap:8px;width:100%;margin-top:0;padding:0}.controls:before{display:none}.controls button{flex:1;min-height:48px;border-radius:5px;font-size:0}.controls button:first-letter{font-size:1.25rem}.help{width:100%;margin-top:0;padding:0;text-align:center}.help strong:before{display:inline-block}}@media (max-width: 380px){.wrapper{padding:10px 8px 18px;gap:10px}.header h1{font-size:1.18rem}.stat{min-width:0;padding-inline:6px}.stat-val{font-size:.98rem}.help{font-size:.72rem}}