:root{--space-width:42px;--space-height:42px}#qtr-content{container:qtr-content/inline-size;width:100%}#qtr-board-container{align-items:center;display:flex;flex-flow:column nowrap;gap:20px;justify-content:center}#qtr-board-container[data-color=black]{flex-flow:column-reverse nowrap}.qtr-captures{align-content:center;display:flex;flex-flow:row nowrap;gap:2px;height:var(--space-height);margin:4px}#qtr-board{flex-grow:0;flex-shrink:0;height:calc(var(--space-height)*15);position:relative;width:calc(var(--space-width)*17)}#qtr-board-background{background-image:url(img/board.jpg);background-size:cover;border-radius:6px;box-shadow:0 4px 6px #000;filter:brightness(1.2);height:calc(var(--space-height)*15 + 40px);left:-20px;pointer-events:none;position:absolute;top:-20px;transform-origin:center;width:calc(var(--space-width)*17 + 40px)}#qtr-board-container[data-color=black] #qtr-board-background{box-shadow:0 -4px 6px #000;transform:rotate(180deg)}.qtr-board-svg{height:630px;left:0;pointer-events:none;position:absolute;top:0;width:714px}#qtr-board-container[data-color=black] .qtr-board-svg{transform:rotate(180deg)}#qtr-selection-fill-pattern{stroke-width:8px}#qtr-selection-fill-pattern,#qtr-selection-svg-path{stroke:#6fe35f}#qtr-selection-svg-path{fill:url(#qtr-selection-fill-pattern);fill-opacity:.8;stroke-width:4px}#qtr-warning-fill-pattern{stroke-width:6px}#qtr-warning-fill-pattern,#qtr-warning-svg-path{stroke:#f2d329}#qtr-warning-svg-path{fill:url(#qtr-warning-fill-pattern);fill-opacity:.6;stroke-width:4px}#qtr-board-rows{display:flex;flex-flow:column nowrap;position:relative}#qtr-board-container[data-color=red] #qtr-board-rows{flex-flow:column-reverse nowrap}.qtr-board-row{display:flex;flex-flow:row nowrap;justify-content:center}#qtr-board-container[data-color=black] .qtr-board-row{flex-flow:row-reverse nowrap}.qtr-board-space{height:var(--space-height);position:relative;width:var(--space-width)}.qtr-board-space.qtr-selectable:hover{background-color:#ff0}.qtr-piece{--sprite-x:0;--sprite-y:0;background-image:url(img/pieces.png);background-position:calc(var(--sprite-x)*-1*var(--space-height)*70/88) calc(var(--sprite-y)*-1*var(--space-height));background-size:calc(var(--space-height)*8*70/88) calc(var(--space-height)*4);filter:grayscale(0) drop-shadow(0 2px 2px black);height:var(--space-height);position:relative;transition:filter .2s ease-in-out,opacity .2s ease-in-out;width:calc(var(--space-height)*70/88)}.qtr-board-space .qtr-piece{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.qtr-piece[data-suit="0"]{--sprite-y:0}.qtr-piece[data-suit="1"]{--sprite-y:1}.qtr-piece[data-suit="2"]{--sprite-y:2}.qtr-piece[data-suit="3"]{--sprite-y:3}.qtr-piece[data-value="7"]{--sprite-x:0}.qtr-piece[data-value="8"]{--sprite-x:1}.qtr-piece[data-value="9"]{--sprite-x:2}.qtr-piece[data-value="10"]{--sprite-x:3}.qtr-piece[data-value="11"]{--sprite-x:4}.qtr-piece[data-value="12"]{--sprite-x:5}.qtr-piece[data-value="13"]{--sprite-x:6}.qtr-piece[data-value="0"]{--sprite-x:7}.qtr-piece:not(.qtr-selectable){pointer-events:none}.qtr-piece.qtr-selectable:hover,.qtr-piece.qtr-selected{border:3px inset #adff2f;border-radius:3px;margin-top:-3px;position:relative;z-index:1}.qtr-captures .qtr-piece.qtr-selectable:hover,.qtr-captures .qtr-piece.qtr-selected{margin:-3px}.qtr-piece.qtr-inactive{filter:grayscale(1) drop-shadow(0 2px 2px black);opacity:.55}.qtr-moving,.qtr-moving-simple{animation-duration:.9s;animation-fill-mode:forwards;animation-timing-function:ease;z-index:1}.qtr-moving{animation-name:follow-path;offset-anchor:top left;offset-distance:100%;offset-rotate:0deg}@keyframes follow-path{to{offset-distance:0}}.qtr-moving-simple{animation-name:follow-path-simple}@keyframes follow-path-simple{to{transform:none}}.qtr-piece-icon{display:inline-block;margin-left:3px;margin-right:3px;vertical-align:middle}@container qtr-content (width > 900px){#qtr-board-container{flex-flow:row nowrap!important;gap:24px;margin:30px 0}#qtr-board-container[data-color=black]{flex-flow:row-reverse nowrap!important}.qtr-captures{align-content:flex-start;flex-flow:column wrap!important;height:350px;justify-content:center;width:calc(var(--space-height)*2.1*70/88)!important}#qtr-board-container[data-color=black] .qtr-captures[data-color=red],#qtr-board-container[data-color=red] .qtr-captures[data-color=black]{align-content:flex-end}#qtr-help-button-place{left:calc(var(--space-width)*-10 - 8px);margin-bottom:-80px!important;position:relative;top:calc(var(--space-height)*-2 - 8px)}}#qtr-board-help-button-place,#qtr-help-button-place{height:80px;pointer-events:none}#qtr-help-button-place{margin:6px auto;width:80px}#qtr-board-help-button-place{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;width:240px}#qtr-help-button{align-items:center;background:#b31818;border-radius:60px;box-shadow:0 5px 4px #000;color:#f4bb99;cursor:pointer;display:flex;flex-flow:row nowrap;font-size:32px;font-variant:small-caps;height:100%;justify-content:left;outline:2px solid #d27b0b;overflow:hidden;pointer-events:all;transition:color .2s ease-in-out,width .4s ease-out;width:100%}#qtr-help-button:hover{color:#dfdf80}#qtr-help-button div:first-child{font-size:50px;margin-left:15px}#qtr-help-button div:last-child{flex-grow:1;text-align:center;transition:opacity .5s ease-in}#qtr-help-button.qtr-moving,#qtr-help-button.qtr-moving-simple{width:240px}#qtr-help-button-place #qtr-help-button div:last-child{opacity:0}.qtr-capture-diagram{background-image:url(img/capture.png);background-size:cover;height:500px;width:475px}