html,body,#app{margin:0;min-height:100%}body{font-family:Noto Sans SC,Microsoft YaHei,sans-serif;background:radial-gradient(circle at top,#fff5def2,#f3e5c7eb),linear-gradient(180deg,#f7ecd7,#e8d3ac);color:#42210b}button{font:inherit}.app-shell{display:grid;gap:1rem;padding:1.5rem}.app-header{display:grid;gap:.35rem}.eyebrow{margin:0;color:#8f5b2e;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}.app-header h1{margin:0}.layout{display:grid;gap:1rem;grid-template-columns:220px minmax(280px,1fr) 280px;align-items:start}.panel-stack{display:grid;gap:.75rem}.panel{background:#fff9eff0;border:1px solid #d7b388;border-radius:18px;box-shadow:0 12px 24px #784c261f;padding:1rem}.panel h2,.panel p{margin-top:0}.palette-grid{display:grid;gap:.65rem;grid-template-columns:repeat(2,minmax(0,1fr))}.piece-chip{touch-action:none;border:1px solid #8a5c38;border-radius:999px;background:linear-gradient(180deg,#fff8ec,#f2dcc0);color:#5b2d11;padding:.7rem .8rem}.analysis-list{display:grid;gap:.5rem;margin:.75rem 0;padding:0;list-style:none}.analysis-item{width:100%;display:grid;gap:.2rem;text-align:left;border:1px solid #d7b388;border-radius:12px;background:#fffcf6f5;padding:.7rem .8rem}.analysis-coord{font-weight:700}.analysis-reason{color:#6a4728;line-height:1.45}.action-btn{border:1px solid #8a5c38;border-radius:999px;background:linear-gradient(180deg,#8f5b2e,#6f431d);color:#fffaf0;padding:.65rem .95rem}.archive-input{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .9rem;border:1px solid #d7b388;border-radius:12px;background:#fffcf6f5}.archive-actions{display:flex;gap:.6rem;flex-wrap:wrap}.archive-list{display:grid;gap:.6rem;margin:.85rem 0 0;padding:0;list-style:none}.archive-list-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid #ead9c0;border-radius:12px;padding:.7rem .8rem;background:#fffdf8e6}.archive-item-actions{display:flex;gap:.45rem}.board-wrap{display:flex;justify-content:center}.board{position:relative;touch-action:none;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);width:min(560px,100%);aspect-ratio:9 / 10;border:2px solid #8d5625;border-radius:28px;background:linear-gradient(180deg,#fffdf440,#fff0),linear-gradient(180deg,#eed2a8,#e2bc88);box-shadow:inset 0 0 0 1px #ffffff59}.board-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;stroke:#8d5625;stroke-width:1.3;fill:none}.intersection{position:absolute;z-index:1;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#8d5625}.board-piece{position:absolute;z-index:2;display:grid;place-items:center;transform:translate(-50%,-50%);width:42px;height:42px;border:2px solid #8d5625;border-radius:50%;background:linear-gradient(180deg,#fffaf0,#ead2af);color:#5b2d11;font-weight:700;box-shadow:0 10px 20px #784c262e}.analysis-marker{position:absolute;z-index:1;transform:translate(-50%,-50%);width:24px;height:24px;border:0;border-radius:50%;opacity:.9}.analysis-marker.is-safe{background:#2d7f4fd9}.analysis-marker.is-warning{background:#d09c26e0}.analysis-marker.is-danger{background:#b3432fe0}.board-piece.is-active-piece{opacity:.35}.preview-marker{position:absolute;z-index:1;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid rgba(122,70,31,.75);border-radius:50%}.preview-marker.is-valid{border-color:#2d7f4f;background:#2d7f4f2e}.preview-marker.is-occupied{border-color:#b3432f;background:#b3432f2e}.preview-marker.is-delete{border-color:#8f2230;background:#8f22302e}.drag-ghost{position:fixed;z-index:30;pointer-events:none;transform:translate(-50%,-50%);width:42px;height:42px;display:grid;place-items:center;border:2px solid #8d5625;border-radius:50%;background:#fffaf0eb;color:#5b2d11;font-weight:700}.river-text{position:absolute;left:0;right:0;top:calc(50% - .8rem);text-align:center;color:#7a461f;font-weight:700;letter-spacing:.3em}.delete-zone{text-align:center;border-style:dashed;transition:transform .12s ease,background .12s ease,border-color .12s ease}.delete-zone.is-active{transform:translateY(-2px);border-color:#8f2230;background:#8f223014}.status-bar{font-weight:600}@media (max-width: 1100px){.layout{grid-template-columns:1fr}}