:root{--bg: #efe6d2;--panel: #fffdf7;--line: #d8cdb4;--text: #3a3428;--red: #c94f4f;--blue: #4f6fc9;--accent: #c9a227;--accent-deep: #9a731c;--wood-hi: #a98453;--wood-mid: #8a6a3e;--wood-lo: #77582f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 120% 80% at 50% -10%,#faf4e4 0%,transparent 60%),radial-gradient(ellipse 100% 60% at 50% 110%,#e2d3b4 0%,transparent 55%),var(--bg);color:var(--text);font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif}#app{display:flex;justify-content:center;padding:16px}.screen{max-width:1560px;width:100%}.screen.menu{text-align:center;margin-top:8vh}.logo{font-size:56px;margin:0 0 8px;letter-spacing:6px;background:linear-gradient(180deg,#f7dd7f 0%,#e3b23c 45%,var(--accent-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(90,60,10,.35))}.logo:after{content:"";display:block;width:180px;height:3px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.subtitle{font-size:18px;margin:0 0 32px;opacity:.8;letter-spacing:2px}h2{margin:8px 0}.hint{font-size:13px;opacity:.65;margin:4px 0 12px}.map-picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 20px}.map-card{padding:10px 18px;border:2px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font-size:15px;box-shadow:0 2px 4px #5a3c141f;transition:transform .12s ease,border-color .12s ease}.map-card:hover{transform:translateY(-1px)}.map-card span{display:block;font-size:12px;opacity:.7;margin-top:2px}.map-card .map-features{color:var(--accent)}.map-card.active{border-color:var(--accent);background:#fdf3d7;box-shadow:0 2px 6px #c9a22759}.board-tilt{position:relative;perspective:1150px;perspective-origin:50% 26%;padding-top:30px}.board{display:grid;gap:2px;background:linear-gradient(160deg,var(--wood-hi),var(--wood-mid) 55%,var(--wood-lo));padding:8px;border-radius:14px;border:1px solid #5d4423;width:fit-content;margin:0 auto;-webkit-user-select:none;user-select:none;transform:rotateX(24deg);transform-origin:50% 82%;box-shadow:0 14px 30px #462d0a59,0 3px 8px #462d0a40,inset 0 2px #ffffff47,inset 0 -3px 6px #0000004d}.cell{width:108px;height:108px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:5px;background:linear-gradient(180deg,#f3e9cd,#e7d9b4);box-shadow:inset 0 1px 1px #ffffff8c,inset 0 -1px 2px #5a3c141f}.cell.alt{filter:brightness(.96)}.cell.t-water{background:linear-gradient(180deg,#8fc4e8,#5d9fd4);overflow:hidden}.cell.t-water:after{content:"";position:absolute;top:0;right:-18px;bottom:0;left:-18px;background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.22) 7px 9px,transparent 9px 18px);animation:water-flow 3.2s linear infinite;pointer-events:none}@keyframes water-flow{0%{transform:translate(0)}to{transform:translate(-18px)}}.cell.t-grass{background:radial-gradient(circle at 26% 32%,rgba(255,255,255,.3) 2.5px,transparent 3.5px),radial-gradient(circle at 68% 22%,rgba(40,90,20,.22) 2.5px,transparent 3.5px),radial-gradient(circle at 44% 62%,rgba(40,90,20,.18) 3px,transparent 4px),radial-gradient(circle at 76% 70%,rgba(255,255,255,.24) 2px,transparent 3px),linear-gradient(180deg,#a4d18a,#8dbb71)}.cell.t-trap{background:linear-gradient(180deg,#efd69e,#e0bf7e);box-shadow:inset 0 0 4px #5a320f4d}.cell.t-base{background:linear-gradient(180deg,#e8b9a8,#d69a86);box-shadow:inset 0 0 4px #5a1e144d}.cell.t-rail{background:repeating-linear-gradient(0deg,rgba(90,65,35,.35) 0 3px,transparent 3px 11px),linear-gradient(180deg,#ddd5c4,#cfc4ac);box-shadow:inset 0 0 0 2px #5a41234d,inset 0 1px 1px #ffffff73}.cell.t-portal{box-shadow:inset 0 0 0 2px #6e46a059,inset 0 0 8px #9664c859}.cell.t-portal-g1{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.25) 0 18%,transparent 55%),linear-gradient(180deg,#d8c2ee,#c0a6e0)}.cell.t-portal-g2{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.25) 0 18%,transparent 55%),linear-gradient(180deg,#b7cdf0,#9db6e2)}.cell.t-portal-g3{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.25) 0 18%,transparent 55%),linear-gradient(180deg,#efbfb4,#dfa498)}.cell .portal-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 1px 2px #00000040;animation:portal-glow 1.8s ease-in-out infinite}.cell .portal-dot.p1{background:#9c64c9}.cell .portal-dot.p2{background:#3f78d0}.cell .portal-dot.p3{background:#d05f4f}@keyframes portal-glow{0%,to{box-shadow:0 0 3px #ffffff80,0 1px 2px #00000040}50%{box-shadow:0 0 9px 2px #ffffffd9,0 1px 2px #00000040}}.cell .mark{opacity:.5;font-size:28px;color:#6b3f1e;text-shadow:0 1px 0 rgba(255,255,255,.6)}.cell.clickable{cursor:pointer}.cell.clickable:hover{filter:brightness(1.07)}.cell.selected{outline:5px solid var(--accent);outline-offset:-5px;z-index:2;animation:sel-pulse 1s ease-in-out infinite}@keyframes sel-pulse{0%,to{box-shadow:0 0 #c9a22773}50%{box-shadow:0 0 0 5px #c9a22700}}.cell.hl-move:before{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:#4caf50e6;box-shadow:0 0 14px #4caf50cc;animation:hl-breathe 1.1s ease-in-out infinite;pointer-events:none}.cell.hl-attack{box-shadow:inset 0 0 0 5px #e53935,inset 0 0 16px #e5393573}.cell.hl-attack:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:5px;border:3px solid rgba(229,57,53,.75);animation:hl-breathe .9s ease-in-out infinite;pointer-events:none}@keyframes hl-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}.cell.revealed{outline:none;z-index:2;animation:rev-glow 1.4s ease-in-out infinite}@keyframes rev-glow{0%,to{box-shadow:0 0 10px 3px #ffc1078c}50%{box-shadow:0 0 26px 8px #ffc107e6}}.piece{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.92);box-shadow:inset 0 2px 3px #ffffff8c,inset 0 -5px 7px #00000061,0 3px 5px #0000006b;transition:transform .15s ease;position:relative;z-index:1;transform:rotateX(-24deg);transform-origin:50% 78%}.piece.s-red{background:radial-gradient(circle at 35% 28%,#ef9a9a,#d9534f 55%,var(--red))}.piece.s-blue{background:radial-gradient(circle at 35% 28%,#9fb8ef,#5b7bd5 55%,var(--blue))}.piece.fake{border-style:dashed}.piece.facedown{background:linear-gradient(135deg,rgba(255,255,255,.14) 0 42%,transparent 46%),radial-gradient(circle at 35% 28%,#7b838d,#565e68 60%,#454c55);color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.6)}.cell.clickable:hover .piece{transform:rotateX(-24deg) translateY(-2px) scale(1.05)}.cell.selected .piece{transform:rotateX(-24deg) translateY(-3px) scale(1.1);box-shadow:0 6px 10px #0006,inset 0 2px 3px #ffffff8c}.piece.sprite{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;display:flex;align-items:center;justify-content:center;border:none;box-shadow:none;background:none;border-radius:0}.piece.sprite .piece-img{width:144px;height:144px;max-width:none;display:block;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}.piece.sprite .lv-badge{position:absolute;right:-1px;bottom:0;min-width:26px;height:26px;padding:0 4px;border-radius:13px;background:linear-gradient(180deg,#f2d479,#c9992a);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 1px 3px #00000073;color:#4a3200;font-size:17px;font-weight:700;line-height:21px;text-align:center;text-shadow:none;z-index:2}.piece.sprite.fake{border:none}.fx{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.fx-move{animation:fx-ripple .45s ease-out forwards}@keyframes fx-ripple{0%{box-shadow:0 0 #ffffffd9}to{box-shadow:0 0 0 14px #fff0}}.fx-clash{border-radius:50%;background:radial-gradient(circle,rgba(255,244,180,.95) 0%,rgba(255,193,79,.55) 45%,transparent 70%);animation:fx-clash .5s ease-out forwards}@keyframes fx-clash{0%{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}.fx-boom{border-radius:50%;background:radial-gradient(circle,#ffffff 0%,#ffd54f 28%,#ff7043 52%,rgba(255,87,34,.4) 66%,transparent 75%);animation:fx-boom .6s ease-out forwards}@keyframes fx-boom{0%{transform:scale(.2);opacity:1}60%{opacity:1}to{transform:scale(2.1);opacity:0}}.fx-teleport{border-radius:50%;background:radial-gradient(circle,rgba(238,224,255,.95) 0%,rgba(156,100,201,.6) 45%,transparent 70%);animation:fx-teleport .55s ease-out forwards}@keyframes fx-teleport{0%{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}.palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 8px}.tool{padding:8px 14px;border:2px solid var(--line);border-radius:8px;background:var(--panel);font-size:15px;cursor:pointer;box-shadow:0 2px 4px #5a3c141f;transition:transform .12s ease,border-color .12s ease}.tool:hover{transform:translateY(-1px)}.tool.active{border-color:var(--accent);background:#fdf3d7;box-shadow:0 2px 6px #c9a22759}.tool.usedup{opacity:.35;cursor:default;transform:none}.tool b{color:var(--accent)}.status{text-align:center;min-height:22px;font-size:14px}.status .err{color:#c0392b}.status .ok{color:#2e7d32;font-weight:700}.actions{display:flex;gap:12px;justify-content:center;margin:16px 0}.actions.vertical{flex-direction:column;align-items:center}button{padding:10px 26px;font-size:16px;border:1px solid var(--accent-deep);border-radius:10px;background:linear-gradient(180deg,#ecc457,#d3a032 55%,var(--accent));color:#4a3200;font-weight:700;cursor:pointer;box-shadow:inset 0 1px #ffffff8c,0 3px 6px #78550a4d;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 5px 10px #78550a59}button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 3px #78550a4d}button:disabled{opacity:.4;cursor:default}button.ghost{background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:0 2px 4px #5a3c141a;font-weight:400}.map-tag{display:inline-block;margin-left:10px;padding:2px 10px;font-size:12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--accent-deep);vertical-align:middle}.events{color:var(--accent-deep);margin-left:6px;font-weight:700}.turn-dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-left:8px;vertical-align:middle;box-shadow:inset 0 -2px 3px #00000059,inset 0 2px 2px #ffffff80}.turn-dot[data-side=red]{background:radial-gradient(circle at 35% 30%,#ef9a9a,var(--red));animation:turn-glow-r 1.6s ease-in-out infinite}.turn-dot[data-side=blue]{background:radial-gradient(circle at 35% 30%,#9fb8ef,var(--blue));animation:turn-glow-b 1.6s ease-in-out infinite}@keyframes turn-glow-r{0%,to{box-shadow:0 0 4px 1px #c94f4f99,inset 0 -2px 3px #00000059}50%{box-shadow:0 0 12px 3px #c94f4fe6,inset 0 -2px 3px #00000059}}@keyframes turn-glow-b{0%,to{box-shadow:0 0 4px 1px #4f6fc999,inset 0 -2px 3px #00000059}50%{box-shadow:0 0 12px 3px #4f6fc9e6,inset 0 -2px 3px #00000059}}.mode-bar .toggle.active{background:linear-gradient(180deg,#ecc457,var(--accent));color:#4a3200;border-color:var(--accent-deep)}.mode-toggle{display:flex;gap:0;justify-content:center}.mode-toggle button{border-radius:0;border-right-width:0}.mode-toggle button:first-child{border-radius:8px 0 0 8px}.mode-toggle button:last-child{border-radius:0 8px 8px 0;border-right-width:1px}.mode-toggle button.active{background:linear-gradient(180deg,#ecc457,var(--accent));color:#4a3200;border-color:var(--accent-deep)}.debug-panel{margin:16px auto 0;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 16px;box-shadow:0 3px 8px #5a3c141a}.debug-body{margin-top:10px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.setup-wrap{width:100%}.setup-table{width:100%;border-collapse:collapse;font-size:13px;max-height:240px;overflow-y:auto;display:block}.setup-table th,.setup-table td{border:1px solid var(--line);padding:3px 8px;text-align:center}.setup-table th{background:#f3ead2}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e140580;display:flex;align-items:center;justify-content:center;animation:overlay-in .25s ease-out;z-index:10}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.dialog{background:var(--panel);padding:32px 48px;border-radius:14px;text-align:center;border-top:5px solid var(--accent);box-shadow:0 16px 40px #0006;animation:dialog-in .35s cubic-bezier(.2,1.4,.4,1)}@keyframes dialog-in{0%{transform:translateY(26px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.dialog h1{margin:0 0 8px;color:var(--accent)}.end-banner{max-width:560px;margin:16px auto 0;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--accent);box-shadow:0 3px 8px #c9a22740;font-weight:700;color:var(--accent-deep)}.mode-bar{display:flex;gap:0;justify-content:center;margin:0 0 10px}.mode-bar .toggle{border-radius:0;border-right-width:0}.mode-bar .toggle:first-child{border-radius:8px 0 0 8px}.mode-bar .toggle:last-child{border-radius:0 8px 8px 0;border-right-width:1px}.mode-bar .toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}.online-form{max-width:460px;margin:0 auto;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 22px}.online-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;margin-bottom:12px}.online-form input{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:15px;background:#fff;color:var(--text)}.online-form .map-picker{margin:4px 0 14px;justify-content:flex-start}.online-form .map-card{min-width:96px;padding:8px 12px}.join-row{display:flex;gap:8px;justify-content:center}.join-input{width:130px;text-align:center;letter-spacing:3px;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:16px}.room-bar{display:flex;gap:14px;align-items:baseline;justify-content:center;margin:4px 0 8px;font-size:15px}.room-code{font-size:24px;letter-spacing:4px;color:var(--accent);background:var(--panel);border:1px dashed var(--line);border-radius:6px;padding:2px 10px;-webkit-user-select:all;user-select:all}.screen{position:relative}.toolbar{position:absolute;top:-4px;right:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;z-index:6}.toolbar-seg{display:flex;position:relative}.toolbar-seg .compact:first-child{border-radius:7px 0 0 7px;border-right-width:0}.toolbar-seg .compact:last-child{border-radius:0 7px 7px 0;border-right-width:1px}.toolbar-seg .compact.active{background:linear-gradient(180deg,#ecc457,var(--accent));color:#4a3200;border-color:var(--accent-deep);font-weight:700}button.compact{padding:5px 12px;font-size:13px;border-radius:7px}.toolbar-drop{position:absolute;top:calc(100% + 6px);right:0;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 6px 16px #5a3c1433;z-index:7;max-height:46vh;overflow:auto;min-width:130px}.toolbar-drop .compact{display:block;width:100%;margin:0 0 6px;text-align:left}.toolbar-drop .hint{margin:4px 0;white-space:normal}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button.ghost{min-height:42px}.mode-bar{width:340px;margin-left:auto;margin-right:auto}.mode-bar .toggle{flex:1 1 0;height:42px;padding:0 10px}.actions button,.debug-panel button{min-width:200px}.screen>button.ghost{display:block;min-width:200px;margin:16px auto 0}.board{position:relative}.piece.anim-ghost{position:absolute;top:0;left:0;z-index:6;pointer-events:none;will-change:transform;margin:9px 0 0 9px}.piece.anim-ghost.sprite{inset:auto;width:144px;height:144px;margin:-1px 0 0 -1px;display:flex;align-items:center;justify-content:center;background:none;border:none;box-shadow:none;border-radius:0}.deploy-box{position:absolute;border:3px solid;border-radius:10px;pointer-events:none;z-index:5;animation:deploy-breathe 2.2s ease-in-out infinite}@keyframes deploy-breathe{0%,to{filter:brightness(1)}50%{filter:brightness(1.4)}}.deploy-label{position:absolute;transform:translate(-50%);height:30px;line-height:30px;font-size:24px;letter-spacing:4px;padding-left:4px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);z-index:6;pointer-events:none}.board-scaler{width:100%;margin-bottom:24px}