body{color:#fff;background:#1e1e1e;justify-content:center;margin:0;padding-top:40px;font-family:Arial,sans-serif;display:flex}.chess-board{border:4px solid #444;grid-template-rows:repeat(8,100px);grid-template-columns:repeat(8,100px);display:grid}.square{justify-content:center;align-items:center;font-size:12px;display:flex}.light{color:#000;background:#f0d9b5}.dark{color:#fff;background:#b58863}.piece{-webkit-user-select:none;user-select:none;cursor:grab;font-size:52px;line-height:1}.piece.white{color:#fff;text-shadow:0 0 2px #000}.piece.black{color:#000;text-shadow:0 0 2px #fff}.piece:active{cursor:grabbing}.selected{outline-offset:-4px;outline:4px solid #4caf50}.room-dialog{background:#2b2b2b;border-radius:12px;gap:14px;width:320px;padding:24px;display:grid}.room-dialog input,.room-dialog button{padding:12px;font-size:16px}.separator{text-align:center;opacity:.7}.game-menu{z-index:20;position:fixed;top:18px;right:18px}.menu-toggle{color:#fff;cursor:pointer;background:#000;border:1px solid #3f3f46;border-radius:6px;place-content:center;gap:5px;width:46px;height:46px;padding:0;display:grid}.menu-toggle span{background:currentColor;border-radius:2px;width:22px;height:2px;display:block}.menu-toggle:hover,.menu-toggle:focus{opacity:.75}.game-toolbar{background:#2b2b2b;border:1px solid #3f3f46;border-radius:8px;flex-direction:column;gap:8px;width:180px;padding:10px;display:none;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 16px 40px #00000059}.game-toolbar.open{display:flex}.game-toolbar h3{margin:0 12px 0 0}.button-31{box-sizing:border-box;color:#fff;cursor:pointer;text-align:center;text-transform:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;background-color:#000;border-style:none;border-radius:4px;outline:none;width:106px;min-width:10px;max-width:none;min-height:44px;margin:0;padding:9px 10px 8px;font-family:Farfetch Basis,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.5;display:inline-block;position:relative;overflow:hidden}.game-toolbar .button-31{width:100%}button:disabled{color:#fff;cursor:default;opacity:1;background-color:#6b7280}.button-31:hover,.button-31:focus{opacity:.75}.square.last-move{box-shadow:inset 0 0 0 4px #22c55e}.makruk-board-frame{--board-size:min(82vw, 720px);--teak-dark:#5f321d;--teak-medium:#8f542f;--teak-light:#c28a55;--teak-gold:#d8a76d;--line-color:#401e0f94;width:var(--board-size);height:var(--board-size);box-sizing:border-box;background:linear-gradient(90deg, #ffffff06, transparent 15%, #2d12080f 45%, transparent 70%, #ffffff08), repeating-linear-gradient(3deg, #4a231114 0, #4a231114 1px, transparent 1px, transparent 7px), linear-gradient(135deg, var(--teak-light), var(--teak-medium) 48%, var(--teak-dark));border:1px solid #3a1b0de6;border-radius:5px;padding:clamp(10px,1.6vw,18px);position:relative;box-shadow:0 18px 42px #160a055c,0 5px 12px #160a0547,inset 0 1px #ffe7be40,inset 0 0 0 3px #441f0e40}.makruk-board-frame:before{content:"";pointer-events:none;border:1px solid #e8b7763d;border-radius:2px;position:absolute;inset:6px}.makruk-board-frame:after{content:"";pointer-events:none;z-index:2;border:1px solid #36180bb8;position:absolute;inset:clamp(9px,1.45vw,16px);box-shadow:inset 0 0 7px #260f0638,0 0 0 1px #e2ad6c1f}.chess-board.makruk-board{z-index:1;background:repeating-linear-gradient(5deg,#4d24110e 0 1px,#0000 1px 8px),linear-gradient(110deg,#c98f59,#b97943 47%,#c58b55);border:1px solid #35190cb8;border-radius:1px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 18px #3a180929}.makruk-board .square{box-sizing:border-box;border-right:1px solid var(--line-color);border-bottom:1px solid var(--line-color);justify-content:center;align-items:center;min-width:0;min-height:0;transition:background-color .12s,box-shadow .12s;display:flex;position:relative}.makruk-board .square:nth-child(8n){border-right:0}.makruk-board .square:nth-child(n+57){border-bottom:0}.makruk-board .square.light{background:linear-gradient(135deg,#ffdcab13,#ffffff04)}.makruk-board .square.dark{background:linear-gradient(135deg,#5c2b140b,#59271017)}.makruk-board .square:hover{background-color:#ffdc9e21;box-shadow:inset 0 0 0 1px #ffdfa921}.makruk-board .square.last-move{background:radial-gradient(circle,#ffd47e3b,#cc873321 55%,#75431d14)}.makruk-board .square.last-move:after{content:"";pointer-events:none;border:1px solid #ffda912e;position:absolute;inset:4%}.makruk-piece{z-index:4;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;justify-content:center;align-items:center;width:84%;height:88%;transition:transform .13s,filter .13s;display:flex;position:relative}.makruk-piece:hover{transform:translateY(-2px)scale(1.035)}.makruk-piece:active{cursor:grabbing;transform:translateY(1px)scale(.97)}.makruk-piece-shape{filter:drop-shadow(0 3px 2px #1c0b0447)drop-shadow(0 8px 5px #1c0b0429);flex-direction:column;justify-content:flex-end;align-items:center;width:78%;height:91%;display:flex;position:relative}.makruk-piece.white{--piece-top:#f1d4a6;--piece-mid:#d6a66d;--piece-bottom:#a86d39;--piece-edge:#73401f;--piece-highlight:#fff4dab8;--piece-mark:#653618}.makruk-piece.black{--piece-top:#65351f;--piece-mid:#3d2015;--piece-bottom:#21110d;--piece-edge:#130907;--piece-highlight:#c47f4e47;--piece-mark:#e2b77f}.piece-head{aspect-ratio:1;border:1px solid var(--piece-edge);background:radial-gradient(circle at 34% 25%, var(--piece-highlight), transparent 23%), linear-gradient(145deg, var(--piece-top), var(--piece-mid) 56%, var(--piece-bottom));border-radius:50% 50% 44% 44%;justify-content:center;align-items:center;width:45%;display:flex;position:absolute;top:19%;left:50%;transform:translate(-50%);box-shadow:inset -3px -4px 5px #1d0c053b,inset 2px 2px 4px #ffefcf24}.piece-mark{z-index:2;color:var(--piece-mark);text-shadow:0 1px #fff4d729;font-family:Noto Sans Thai,Th Sarabun New,Tahoma,sans-serif;font-size:clamp(.62rem,2.35vw,1.22rem);font-weight:700;line-height:1;position:relative}.piece-neck{border-right:1px solid var(--piece-edge);border-left:1px solid var(--piece-edge);background:linear-gradient(90deg, var(--piece-bottom), var(--piece-top) 33%, var(--piece-mid) 66%, var(--piece-bottom));width:29%;height:15%;position:absolute;top:52%;left:50%;transform:translate(-50%)}.piece-body{border:1px solid var(--piece-edge);background:radial-gradient(ellipse at 35% 22%, var(--piece-highlight), transparent 28%), linear-gradient(120deg, var(--piece-bottom), var(--piece-top) 34%, var(--piece-mid) 68%, var(--piece-bottom));border-radius:50% 50% 23% 23%/68% 68% 22% 22%;width:61%;height:32%;position:absolute;bottom:16%;left:50%;transform:translate(-50%);box-shadow:inset -5px -3px 6px #1c0b053b,inset 3px 1px 5px #ffebc621}.piece-base{border:1px solid var(--piece-edge);background:linear-gradient(180deg, var(--piece-top), var(--piece-mid) 49%, var(--piece-bottom));position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 2px 2px #ffefd21f,inset 0 -3px 4px #190a0438}.piece-base-upper{border-radius:48% 48% 18% 18%;width:70%;height:12%;bottom:9%}.piece-base-lower{border-radius:45% 45% 26% 26%;width:83%;height:11%;bottom:1%}.piece-crown{z-index:3;width:49%;height:24%;position:absolute;top:3%;left:50%;transform:translate(-50%)}.crown-tip{border:1px solid var(--piece-edge);background:linear-gradient(140deg, var(--piece-top), var(--piece-mid) 62%, var(--piece-bottom));transform-origin:bottom;border-radius:70% 70% 45% 45%;width:27%;height:82%;display:block;position:absolute;bottom:0}.crown-tip-left{left:7%;transform:rotate(-23deg)}.crown-tip-center{height:100%;left:36.5%}.crown-tip-right{right:7%;transform:rotate(23deg)}.makruk-piece-shape.khun .piece-crown{width:55%;height:29%;top:0}.makruk-piece-shape.khun .piece-head{width:47%;top:22%}.makruk-piece-shape.khun .piece-body{width:65%}.makruk-piece-shape.met{transform:scale(.9)}.makruk-piece-shape.met .piece-crown{width:41%;height:21%}.makruk-piece-shape.met .crown-tip-left,.makruk-piece-shape.met .crown-tip-right{display:none}.makruk-piece-shape.met .crown-tip-center{width:30%;left:35%}.makruk-piece-shape.khon .piece-head{border-radius:55% 55% 35% 35%;width:53%;top:18%}.makruk-piece-shape.khon .piece-crown{width:45%;top:4%}.makruk-piece-shape.ma .piece-head{border-radius:65% 42% 52% 40%;width:48%;top:17%;left:54%;transform:translate(-50%)rotate(-8deg)}.makruk-piece-shape.ma .piece-crown{width:38%;top:4%;left:52%;transform:translate(-50%)rotate(-8deg)}.makruk-piece-shape.ma .crown-tip-left,.makruk-piece-shape.ma .crown-tip-right{display:none}.makruk-piece-shape.ma .crown-tip-center{width:42%;left:29%}.makruk-piece-shape.ruea .piece-crown{width:53%;height:13%;top:11%}.makruk-piece-shape.ruea .crown-tip{border-radius:20% 20% 4% 4%;width:25%;height:100%;bottom:0}.makruk-piece-shape.ruea .crown-tip-left{left:0;transform:none}.makruk-piece-shape.ruea .crown-tip-center{left:37.5%}.makruk-piece-shape.ruea .crown-tip-right{right:0;transform:none}.makruk-piece-shape.ruea .piece-head{border-radius:18% 18% 40% 40%;width:52%;top:22%}.makruk-piece-shape.bia{height:74%;transform:translateY(10%)}.makruk-piece-shape.bia .piece-crown{display:none}.makruk-piece-shape.bia .piece-head{width:46%;top:14%}.makruk-piece-shape.bia .piece-neck{top:49%}.makruk-piece-shape.bia .piece-body{width:57%;height:30%}.makruk-board-decoration{z-index:5;pointer-events:none;border-style:solid;border-color:#ecba775c;width:9px;height:9px;position:absolute}.makruk-board-decoration.top-left{border-width:1px 0 0 1px;top:7px;left:7px}.makruk-board-decoration.top-right{border-width:1px 1px 0 0;top:7px;right:7px}.makruk-board-decoration.bottom-left{border-width:0 0 1px 1px;bottom:7px;left:7px}.makruk-board-decoration.bottom-right{border-width:0 1px 1px 0;bottom:7px;right:7px}@media (width<=700px){.makruk-board-frame{--board-size:min(94vw, 620px);border-radius:3px;padding:10px}.makruk-board-frame:after{inset:9px}.makruk-piece{width:89%;height:91%}.piece-mark{font-size:clamp(.55rem,3.1vw,1rem)}}@media (width<=420px){.makruk-board-frame{--board-size:96vw;padding:8px}.makruk-board-frame:before{inset:4px}.makruk-board-frame:after{inset:7px}.makruk-piece{width:93%;height:93%}.makruk-board .square{border-bottom-width:.7px;border-right-width:.7px}}