.tr-game{--tr-p1:#c77760;--tr-p2:#668c79;display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}.tr-p1{--piece:var(--tr-p1,#c77760)}.tr-p2{--piece:var(--tr-p2,#668c79)}.tr-p0{--piece:transparent}.tr-summary{display:flex;gap:10px}.tr-seat{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid #cfcbb8;border-left:4px solid var(--piece);padding:10px 12px;border-radius:12px;min-width:0}.tr-seat.active{background:#eae6d8}.tr-seat>span{flex:1;min-width:80px;font-size:13px}.tr-seat strong{font-size:22px;color:var(--piece)}.tr-seat small{font-size:11px;font-weight:400}.tr-field{width:100%;max-width:600px;aspect-ratio:1;position:relative;margin-inline:auto;background:#e9e3d2;isolation:isolate;border:1px solid #c8c0aa;box-sizing:border-box}.tr-lines{position:absolute;inset:0;width:100%;height:100%;color:#8f927e}.tr-dots,.tr-morris{border-radius:14px}.tr-dot{position:absolute;width:9px;height:9px;background:#5b6650;border-radius:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none}.tr-box{position:absolute;width:21%;height:21%;background:color-mix(in srgb,var(--piece) 24%,transparent);display:grid;place-items:center;font-size:22px;color:var(--piece);pointer-events:none}.tr-edge{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;box-shadow:none;z-index:2;display:grid;place-items:center;border-radius:6px;touch-action:manipulation}.tr-horizontal{width:18%;height:32px}.tr-vertical{width:32px;height:18%}.tr-edge i{display:block;border-radius:3px;background:#bbb9a9;pointer-events:none}.tr-horizontal i{height:5px;width:100%}.tr-vertical i{width:5px;height:100%}.tr-edge.tr-drawn i{background:var(--piece)}.tr-edge.tr-selected i{background:var(--piece);opacity:.45}.tr-edge:disabled{opacity:1;cursor:default}.tr-edge.tr-last i{box-shadow:0 0 0 1px #535a47}.tr-edge:focus-visible{outline:3px solid #5678a3;outline-offset:1px}.tr-morris .tr-cell{position:absolute;transform:translate(-50%,-50%);width:9%;height:9%;min-width:30px;min-height:30px;background:transparent;border:0;padding:2px}.tr-morris .tr-cell:before{content:'';position:absolute;inset:39%;border-radius:50%;background:#757c67;z-index:-1}.tr-draughts{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border:7px solid #b6a688}.tr-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:0;border-radius:0;padding:6%;background:#eee7d5;box-shadow:none;touch-action:manipulation}.tr-cell:disabled{opacity:1;cursor:default}.tr-cell.tr-dark{background:#a0aa91}.tr-cell.tr-source{outline:3px solid var(--tr-active);outline-offset:-3px}.tr-cell.tr-selected{outline:3px solid #597a96;outline-offset:-3px}.tr-cell.tr-last:not(.tr-source):not(.tr-selected){box-shadow:inset 0 0 0 2px #f8f1d9}.tr-morris .tr-cell{border-radius:50%}.tr-piece{width:86%;height:86%;border-radius:50%;background:var(--piece);border:2px solid #fbf2db;box-shadow:0 3px 0 color-mix(in srgb,var(--piece) 70%,#333);display:grid;place-items:center;position:relative;pointer-events:none;box-sizing:border-box}.tr-piece:after{content:'';position:absolute;inset:15%;border:1px solid #f4ecd78c;border-radius:50%}.tr-piece svg{width:65%;height:65%;fill:#fff2cd}.tr-piece.tr-ghost{position:absolute;width:76%;height:76%;opacity:.45;box-shadow:none}.tr-legal-dot{width:12%;height:12%;min-width:6px;min-height:6px;border-radius:50%;background:#526b57;pointer-events:none}.tr-capturable{outline:1px dashed #767a64;outline-offset:-2px}.tr-remove{position:absolute;color:#fff;font-size:28px;line-height:1;pointer-events:none}.tr-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #d2cbb9;border-radius:12px;background:#f2eadf;min-width:0}.tr-controls p{margin:0;font-size:13px;line-height:1.6;flex:1}.tr-controls>div{display:flex;align-items:center;gap:8px;flex-shrink:0}.tr-controls button{min-height:42px}.tr-log{margin:0;min-height:2.5em;font-size:12px}.tr-preview{width:100%;aspect-ratio:1}.tr-preview img{display:block;width:100%;height:100%;object-fit:contain}.tr-catalog{background:#e9e3d2}.tr-catalog>img{width:210px;height:210px;max-height:82%;max-width:82%;object-fit:contain;display:block}.traditional-page .play-area{min-width:0}.traditional-page .table-decision{width:100%}
@media(hover:hover){.tr-edge:not(:disabled):not(.tr-selected):hover i{background:var(--tr-active);opacity:.55}.tr-cell:not(:disabled):hover{filter:brightness(1.05)}}
@media(min-width:1000px){.traditional-page .tr-field{max-width:min(600px,100%,calc(100dvh - 350px));min-width:320px}.traditional-page .tr-summary{gap:12px}.traditional-page .tr-log{min-height:1.5em}}
@media(max-width:600px){.tr-controls{flex-wrap:wrap;padding:10px}.tr-controls p{flex-basis:100%;min-height:3.2em}.tr-controls>div{width:100%;justify-content:flex-end}.tr-seat{padding:8px;gap:4px}.tr-seat strong{font-size:19px}.tr-seat>span{font-size:12px;flex-basis:100%}.tr-draughts{border-width:5px}.tr-piece{border-width:1px}.tr-cell.tr-source,.tr-cell.tr-selected{outline-width:2px}.tr-field{max-width:540px}}
@media(prefers-reduced-motion:reduce){.traditional-page *{scroll-behavior:auto}}
/* generated positions */
.tr-edge-pos-0{left:18.5%;top:8%}
.tr-edge-pos-1{left:39.5%;top:8%}
.tr-edge-pos-2{left:60.5%;top:8%}
.tr-edge-pos-3{left:81.5%;top:8%}
.tr-edge-pos-4{left:18.5%;top:29%}
.tr-edge-pos-5{left:39.5%;top:29%}
.tr-edge-pos-6{left:60.5%;top:29%}
.tr-edge-pos-7{left:81.5%;top:29%}
.tr-edge-pos-8{left:18.5%;top:50%}
.tr-edge-pos-9{left:39.5%;top:50%}
.tr-edge-pos-10{left:60.5%;top:50%}
.tr-edge-pos-11{left:81.5%;top:50%}
.tr-edge-pos-12{left:18.5%;top:71%}
.tr-edge-pos-13{left:39.5%;top:71%}
.tr-edge-pos-14{left:60.5%;top:71%}
.tr-edge-pos-15{left:81.5%;top:71%}
.tr-edge-pos-16{left:18.5%;top:92%}
.tr-edge-pos-17{left:39.5%;top:92%}
.tr-edge-pos-18{left:60.5%;top:92%}
.tr-edge-pos-19{left:81.5%;top:92%}
.tr-edge-pos-20{left:8%;top:18.5%}
.tr-edge-pos-21{left:29%;top:18.5%}
.tr-edge-pos-22{left:50%;top:18.5%}
.tr-edge-pos-23{left:71%;top:18.5%}
.tr-edge-pos-24{left:92%;top:18.5%}
.tr-edge-pos-25{left:8%;top:39.5%}
.tr-edge-pos-26{left:29%;top:39.5%}
.tr-edge-pos-27{left:50%;top:39.5%}
.tr-edge-pos-28{left:71%;top:39.5%}
.tr-edge-pos-29{left:92%;top:39.5%}
.tr-edge-pos-30{left:8%;top:60.5%}
.tr-edge-pos-31{left:29%;top:60.5%}
.tr-edge-pos-32{left:50%;top:60.5%}
.tr-edge-pos-33{left:71%;top:60.5%}
.tr-edge-pos-34{left:92%;top:60.5%}
.tr-edge-pos-35{left:8%;top:81.5%}
.tr-edge-pos-36{left:29%;top:81.5%}
.tr-edge-pos-37{left:50%;top:81.5%}
.tr-edge-pos-38{left:71%;top:81.5%}
.tr-edge-pos-39{left:92%;top:81.5%}
.tr-dot-pos-0{left:8%;top:8%}
.tr-dot-pos-1{left:29%;top:8%}
.tr-dot-pos-2{left:50%;top:8%}
.tr-dot-pos-3{left:71%;top:8%}
.tr-dot-pos-4{left:92%;top:8%}
.tr-dot-pos-5{left:8%;top:29%}
.tr-dot-pos-6{left:29%;top:29%}
.tr-dot-pos-7{left:50%;top:29%}
.tr-dot-pos-8{left:71%;top:29%}
.tr-dot-pos-9{left:92%;top:29%}
.tr-dot-pos-10{left:8%;top:50%}
.tr-dot-pos-11{left:29%;top:50%}
.tr-dot-pos-12{left:50%;top:50%}
.tr-dot-pos-13{left:71%;top:50%}
.tr-dot-pos-14{left:92%;top:50%}
.tr-dot-pos-15{left:8%;top:71%}
.tr-dot-pos-16{left:29%;top:71%}
.tr-dot-pos-17{left:50%;top:71%}
.tr-dot-pos-18{left:71%;top:71%}
.tr-dot-pos-19{left:92%;top:71%}
.tr-dot-pos-20{left:8%;top:92%}
.tr-dot-pos-21{left:29%;top:92%}
.tr-dot-pos-22{left:50%;top:92%}
.tr-dot-pos-23{left:71%;top:92%}
.tr-dot-pos-24{left:92%;top:92%}
.tr-box-pos-0{left:8%;top:8%}
.tr-box-pos-1{left:29%;top:8%}
.tr-box-pos-2{left:50%;top:8%}
.tr-box-pos-3{left:71%;top:8%}
.tr-box-pos-4{left:8%;top:29%}
.tr-box-pos-5{left:29%;top:29%}
.tr-box-pos-6{left:50%;top:29%}
.tr-box-pos-7{left:71%;top:29%}
.tr-box-pos-8{left:8%;top:50%}
.tr-box-pos-9{left:29%;top:50%}
.tr-box-pos-10{left:50%;top:50%}
.tr-box-pos-11{left:71%;top:50%}
.tr-box-pos-12{left:8%;top:71%}
.tr-box-pos-13{left:29%;top:71%}
.tr-box-pos-14{left:50%;top:71%}
.tr-box-pos-15{left:71%;top:71%}
.tr-morris [data-pos="0"]{left:8%;top:8%}
.tr-morris [data-pos="1"]{left:50%;top:8%}
.tr-morris [data-pos="2"]{left:92%;top:8%}
.tr-morris [data-pos="3"]{left:92%;top:50%}
.tr-morris [data-pos="4"]{left:92%;top:92%}
.tr-morris [data-pos="5"]{left:50%;top:92%}
.tr-morris [data-pos="6"]{left:8%;top:92%}
.tr-morris [data-pos="7"]{left:8%;top:50%}
.tr-morris [data-pos="8"]{left:22%;top:22%}
.tr-morris [data-pos="9"]{left:50%;top:22%}
.tr-morris [data-pos="10"]{left:78%;top:22%}
.tr-morris [data-pos="11"]{left:78%;top:50%}
.tr-morris [data-pos="12"]{left:78%;top:78%}
.tr-morris [data-pos="13"]{left:50%;top:78%}
.tr-morris [data-pos="14"]{left:22%;top:78%}
.tr-morris [data-pos="15"]{left:22%;top:50%}
.tr-morris [data-pos="16"]{left:36%;top:36%}
.tr-morris [data-pos="17"]{left:50%;top:36%}
.tr-morris [data-pos="18"]{left:64%;top:36%}
.tr-morris [data-pos="19"]{left:64%;top:50%}
.tr-morris [data-pos="20"]{left:64%;top:64%}
.tr-morris [data-pos="21"]{left:50%;top:64%}
.tr-morris [data-pos="22"]{left:36%;top:64%}
.tr-morris [data-pos="23"]{left:36%;top:50%}