body{color:#fff;background:#1e1e1e;margin:0;font-family:Arial,sans-serif}html,body,#root{min-height:100%}body{min-height:100vh}main{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:24px;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;left: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);left: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(800px, calc(100vw - 48px), calc(100vh - 48px));--teak-dark:#4c422b;--teak-medium:#d6a844;--teak-light:#e8ba4f;--teak-gold:#edc45a;--line-color:#363223c7;width:var(--board-size);height:var(--board-size);box-sizing:border-box;background:linear-gradient(135deg, var(--teak-light), var(--teak-medium));border:2px solid #302f29;border-radius:2px;padding:clamp(10px,1.6vw,18px);position:relative;box-shadow:0 16px 36px #00000047,inset 0 0 0 2px #fff4ca38}.makruk-board-frame.ai-thinking{box-shadow:0 16px 36px #00000047,0 0 0 3px #22c55e52,inset 0 0 0 2px #fff4ca38}.ai-status{box-sizing:border-box;color:#f9fafb;text-align:center;background:#111827;border:1px solid #374151;border-radius:4px;min-height:26px;padding:6px 10px;font-size:12px;font-weight:700;position:absolute;top:-36px;left:clamp(10px,1.6vw,18px);right:clamp(10px,1.6vw,18px)}.makruk-board-frame:before{content:"";pointer-events:none;border:0;position:absolute;inset:6px}.makruk-board-frame:after{content:"";pointer-events:none;z-index:2;box-shadow:none;border:0;position:absolute;inset:clamp(9px,1.45vw,16px)}.chess-board.makruk-board{z-index:1;width:100%;height:100%;box-shadow:none;background:#e5b848;border:2px solid #3b382b;border-radius:1px;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:relative;overflow:hidden}.makruk-board .square{box-sizing:border-box;border-right:3px solid var(--line-color);border-bottom:3px 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:#e8bb4d}.makruk-board .square.dark{background:#b18c30}.makruk-board .square:hover{background-color:#ffdc9e21;box-shadow:inset 0 0 0 1px #ffdfa921}.makruk-board .square.selected{box-shadow:inset 0 0 0 4px #22c55ee0,inset 0 0 18px #22c55e2e}.makruk-board .move-dot{z-index:6;aspect-ratio:1;pointer-events:none;background:#22c55e;border-radius:50%;width:22%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #1118272e,0 0 13px #22c55e94}.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;place-items:center;width:86%;height:88%;transition:transform .13s,filter .13s;display:grid;position:relative}.makruk-piece:hover{transform:translateY(-2px)scale(1.035)}.makruk-piece:active{cursor:grabbing;transform:translateY(1px)scale(.97)}.makruk-piece.white{--piece-fill:#fff4c9;--piece-fill-2:#efe0a7;--piece-line:#22231e;--piece-shadow:#1f1b105c}.makruk-piece.black{--piece-fill:#383b3b;--piece-fill-2:#242626;--piece-line:#d9c27a;--piece-shadow:#0000006b}.makruk-piece-icon{width:92%;height:92%;filter:drop-shadow(0 3px 1px var(--piece-shadow));display:block;overflow:visible}.makruk-piece-icon .piece-silhouette path:not(.piece-line){fill:var(--piece-fill);stroke:var(--piece-line);stroke-width:3px;stroke-linejoin:round}.makruk-piece.black .makruk-piece-icon .piece-silhouette path:not(.piece-line){fill:url(#black-piece-gradient)}.makruk-piece-icon .piece-line{fill:none;stroke:var(--piece-line);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.makruk-piece-icon .piece-eye{fill:var(--piece-line)}.makruk-piece.black .makruk-piece-icon .piece-eye{fill:#151616;stroke:#d9c27a;stroke-width:1.5px}.makruk-piece-icon .pawn-rings{fill:var(--piece-fill);stroke:var(--piece-line);stroke-width:3.2px}.makruk-piece.black .makruk-piece-icon .pawn-rings{fill:#3b3e3e;stroke:#d9c27a}.makruk-piece-icon.bia{width:72%;height:72%}.makruk-piece-icon.ruea{width:88%;height:88%}.makruk-piece-icon.ma{width:92%;height:94%}.makruk-piece-icon.khon,.makruk-piece-icon.met{width:82%;height:90%}.makruk-piece-icon.khun{width:88%;height:92%}.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){main{padding:12px}.makruk-board-frame{--board-size:min(94vw, calc(100vh - 24px), 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:min(96vw, calc(100vh - 24px));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}}