:root{--figure-tilt:30deg;--figure-lift:7px}.arena-board-label{display:none}.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.capture-settings{margin-top:14px;padding-top:12px;border-top:1px solid #435776}.capture-settings label{display:flex;align-items:center;gap:8px;min-height:44px;color:#d0e6f5;font-size:12px;cursor:pointer}.capture-settings input{width:18px;height:18px;accent-color:#9de9ed}.capture-settings p{color:#abc0d7;font-size:11px;line-height:1.7}.capture-settings input:focus-visible{outline:2px solid #b8f5ff;outline-offset:4px}.capture-cut-in{position:fixed;z-index:80;right:24px;bottom:24px;width:290px;height:238px;overflow:hidden;pointer-events:none;border:1px solid #8ddbe9;border-radius:14px;background:radial-gradient(ellipse at 90% 80%,#4695bb55,transparent 65%),linear-gradient(115deg,#0c182cf5,#1e3455e8);box-shadow:0 12px 50px #0009,0 0 24px #7ce5ff22;animation:capture-arrive .26s ease-out}.capture-cut-in[data-color=b]{border-color:#bb9df7;background:radial-gradient(ellipse at 90% 80%,#9b6bdd55,transparent 65%),linear-gradient(115deg,#171229f5,#30224ce8)}.capture-copy{position:absolute;z-index:1;left:18px;top:34px;width:135px;display:flex;flex-direction:column;gap:12px;text-shadow:0 2px 8px #000}.capture-copy small{font-size:9px;letter-spacing:1.6px;color:#c2edff}.capture-copy strong{font-size:24px;line-height:1.3;color:#fff}.capture-copy>span{font-size:12px;color:#dcecff}.capture-portrait{position:absolute;right:0;bottom:0;width:calc(228px * var(--skin-cell-ratio,.5));height:228px;overflow:hidden;filter:drop-shadow(0 6px 8px #0008)}.capture-portrait>img{position:absolute;display:block;width:600%;max-width:none;height:200%;left:calc(-100% * var(--capture-column,0));top:calc(-100% * var(--capture-row,0));object-fit:fill}.capture-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@keyframes capture-arrive{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@media(max-width:760px){.capture-cut-in{right:12px;bottom:12px;width:228px;height:170px}.capture-portrait{height:166px;width:calc(166px * var(--skin-cell-ratio,.5))}.capture-copy{left:14px;top:24px;width:127px;gap:10px}.capture-copy strong{font-size:20px}.capture-copy small{font-size:8px;letter-spacing:1px}.capture-copy>span{font-size:11px}}@media(prefers-reduced-motion:reduce){.capture-cut-in{animation:none}}body[data-board-view=diorama] #board .piece{pointer-events:none}.scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;order:-1;min-height:36px;padding:0 3px}.scene-wordmark{color:#a6c1df;font-size:9px;font-weight:700;letter-spacing:2px}.scene-view-toggle{min-height:34px;padding:6px 11px;border-color:#506a8b;background:#142139;color:#c2e4ee;font-size:11px}.scene-view-toggle[aria-pressed=true]{border-color:#86dbe8;background:#18323d;color:#d0fcff}.board-stage{position:relative;width:100%;min-width:0;isolation:auto}.figure-role-guide{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;color:#a8c3e1;font-size:10px;line-height:1.5}.figure-role-guide>span{white-space:nowrap}.figure-role-guide>span>span{margin-left:3px;color:#b7c7db}body[data-board-view=diorama] .board-stage{aspect-ratio:1.15;perspective:1800px;perspective-origin:50% 45%;transform-style:preserve-3d}body[data-board-view=diorama] #board{position:absolute;top:8%;left:0;width:100%;transform:rotateX(var(--figure-tilt)) scale(.88);transform-origin:50% 0;transform-style:preserve-3d;overflow:visible;border:8px solid #21354f;border-radius:7px;box-shadow:0 0 0 1px #83d4e266,0 24px 46px #0007;outline:none}body[data-board-view=diorama] #board:before{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:20px;transform-origin:50% 0;transform:rotateX(-90deg);border:1px solid #3b5a7a;border-radius:0 0 5px 5px;background:linear-gradient(#355172,#111a2c 70%);box-shadow:0 2px #80cfe833;pointer-events:none}body[data-board-view=diorama] #board:after{content:"";position:absolute;top:-8px;bottom:-8px;left:100%;width:20px;transform-origin:0 50%;transform:rotateY(90deg);border:1px solid #345471;background:linear-gradient(90deg,#263c57,#0d1528);pointer-events:none}body[data-board-view=diorama] #board .sq{isolation:auto;transform-style:preserve-3d;overflow:visible}body[data-board-view=diorama] #board .sq:has(.piece):before{content:"";position:absolute;left:16%;right:16%;bottom:11%;height:25%;border:1px solid #b1eff9a8;border-radius:50%;background:radial-gradient(ellipse,#7fe7ff44,#091b3188);box-shadow:0 4px 5px #07101ba8;transform:translateZ(1px);pointer-events:none}body[data-board-view=diorama] #board .sq:has(.piece.b):before{border-color:#c4a7ffc7;background:radial-gradient(ellipse,#b084ff44,#140f2388)}body[data-board-view=diorama] #board .sq .piece{position:absolute;left:50%;bottom:15%;width:1em;height:1em;margin:0;transform-origin:50% 100%;transform:translate(-50%) rotateX(calc(-1 * var(--figure-tilt))) translateZ(var(--figure-lift));font-size:11.8cqw;cursor:pointer;transition:filter .14s ease}body[data-board-view=diorama] #board .sq .piece:before{filter:drop-shadow(0 4px 2px #02081888)}body[data-board-view=diorama] #board .sq .piece:after{position:absolute;left:50%;bottom:-3px;display:grid;place-items:center;width:19px;height:17px;transform:translate(-50%);border:1px solid #b1eff9;border-radius:5px;background:#101f35ed;color:#e7fbff;font:12px/1 Segoe UI Symbol,serif;box-shadow:0 2px 5px #0008;pointer-events:none;-webkit-text-stroke:0;text-shadow:none}body[data-board-view=diorama] #board .piece.b:after{border-color:#bca4fa;background:#241c3cef;color:#e7d8ff}body[data-board-view=diorama] #board .piece[data-piece=k]:after{content:"\265a"}body[data-board-view=diorama] #board .piece[data-piece=q]:after{content:"\265b"}body[data-board-view=diorama] #board .piece[data-piece=r]:after{content:"\265c"}body[data-board-view=diorama] #board .piece[data-piece=b]:after{content:"\265d"}body[data-board-view=diorama] #board .piece[data-piece=n]:after{content:"\265e"}body[data-board-view=diorama] #board .piece[data-piece=p]:after{content:"\265f"}body[data-board-view=diorama] #board .board-tactic-badge{transform-origin:50% 100%;transform:rotateX(calc(-1 * var(--figure-tilt))) translateZ(15px);box-shadow:0 2px 8px #0007;max-height:65%}body[data-board-view=diorama] #board .board-tactic-badge.inside{top:auto;bottom:6%;right:2%;width:96%}body[data-board-view=diorama] #board .board-tactic-badge.outside{transform:translate(-2px,2px) rotateX(calc(-1 * var(--figure-tilt))) translateZ(15px)}@media(hover:hover){body[data-board-view=diorama] #board .sq:hover .piece{transform:translate(-50%) rotateX(calc(-1 * var(--figure-tilt))) translateZ(10px);filter:brightness(1.07)}body[data-board-view=diorama] #board .sq.selected .piece{transform:translate(-50%) rotateX(calc(-1 * var(--figure-tilt))) translateZ(12px);filter:drop-shadow(0 0 8px #73f5ff88)}}@media(max-width:760px){:root{--figure-tilt:25deg}.scene-view-toggle{min-height:44px}.board-stage{margin:0}.scene-toolbar{min-height:44px}.scene-wordmark{font-size:8px;letter-spacing:1.4px}body[data-board-view=diorama] .board-stage{perspective:2200px;aspect-ratio:1.04;overflow:clip}body[data-board-view=diorama] #board{border-width:5px;transform:rotateX(var(--figure-tilt)) scale(.88)}body[data-board-view=diorama] #board:before{left:-5px;right:-5px;height:13px}body[data-board-view=diorama] #board:after{top:-5px;bottom:-5px;width:13px}body[data-board-view=diorama] #board .sq .piece:after{width:14px;height:13px;font-size:10px;bottom:-2px;border-radius:3px}.figure-role-guide{gap:6px 10px;font-size:9px}.skin-card{min-height:142px}body[data-board-view=diorama] #board .board-tactic-badge{font-size:7px;padding:1px;max-height:75%}}@media(prefers-reduced-motion:reduce){.scene-view-toggle,body[data-board-view=diorama] #board .sq .piece{transition:none!important}}@supports not (transform-style:preserve-3d){body[data-board-view=diorama] .board-stage{aspect-ratio:1;perspective:none}body[data-board-view=diorama] #board{position:relative;top:auto;transform:none}body[data-board-view=diorama] #board .sq .piece{position:relative;left:auto;bottom:auto;transform:none!important}body[data-board-view=diorama] #board:before,body[data-board-view=diorama] #board:after{display:none}}
