:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:200px;min-height:100vh;justify-content:center}h1{font-size:var(--font-huge);line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:var(--font-medium);font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.piece{display:flex;align-items:flex-end;justify-content:center;transition:transform .3s ease,filter .3s ease;cursor:default;position:relative;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:pieceEntry .4s ease-out;width:var(--piece-base-size);height:var(--piece-base-size);padding-bottom:var(--piece-shadow-padding)}.piece-tall{height:calc(var(--piece-base-size) * 2)}@keyframes pieceEntry{0%{transform:translateY(-10px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.piece-clickable{cursor:pointer}.piece-clickable:hover{transform:scale(1.1) translateY(-2px);filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}.piece-selected{transform:scale(1.1) translateY(-2px);filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 6px 12px rgba(0,0,0,.4))}.piece-body{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:100%;position:relative;background:linear-gradient(135deg,#ffffff4d,#ffffff1a,#0000001a);border:1px solid rgba(255,255,255,.2)}.piece-split .piece-body:before{content:"";position:absolute;top:50%;left:0;right:0;width:100%;height:2px;background-color:#000c;border-radius:1px;z-index:2}.piece-split .piece-body:after{content:"";position:absolute;top:10%;left:20%;width:25%;height:40%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);border-radius:inherit;pointer-events:none;z-index:1}.piece-square .piece-body{background:linear-gradient(135deg,currentColor 0%,color-mix(in srgb,currentColor 80%,black 20%) 100%)!important;border-radius:6px;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0003,0 2px 4px #0003;border:1px solid rgba(0,0,0,.1)!important}.piece-round .piece-body{background:radial-gradient(ellipse at 30% 30%,currentColor 0%,color-mix(in srgb,currentColor 70%,black 30%) 100%);border-radius:50%;box-shadow:inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003,0 2px 4px #0003;border:1px solid rgba(0,0,0,.1)}.piece-split .piece-body{background:linear-gradient(135deg,currentColor 0%,color-mix(in srgb,currentColor 80%,black 20%) 100%)!important;border-radius:6px;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0003,0 2px 4px #0003;border:1px solid rgba(0,0,0,.1)!important}.piece-round.piece-split .piece-body{border-radius:50%}.piece-light{color:wheat}.piece-dark{color:#8b4513}.piece-light .piece-body{background:linear-gradient(135deg,#fae5b8,#e6d3a3,#d4c194)!important}.piece-light.piece-round .piece-body{background:radial-gradient(ellipse at 30% 30%,#fae5b8,#e6d3a3 40%,#d4c194)!important}.piece-dark .piece-body{background:linear-gradient(135deg,#c4915c,#b8860b,#a0742d)!important}.piece-dark.piece-round .piece-body{background:radial-gradient(ellipse at 30% 30%,#c4915c,#b8860b 40%,#a0742d)!important}.piece-smooth .piece-top{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);border:1px solid rgba(0,0,0,.15)}.piece-body:before{content:"";position:absolute;top:10%;left:20%;width:25%;height:40%;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);border-radius:inherit;pointer-events:none;z-index:1}.piece-round .piece-body:before{border-radius:50%}.game-board-area{grid-area:board;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffffe6;border-radius:var(--board-border-radius);padding:var(--spacing-small);box-shadow:0 var(--shadow-small) var(--board-border-radius) #0000001a;min-width:0;min-height:0;overflow:hidden;container-type:size}.board-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);padding:var(--board-padding);background-color:#8b4513;border:var(--board-border-width) solid #654321;border-radius:var(--board-border-radius);box-shadow:0 calc(var(--piece-base-size) * .07) calc(var(--piece-base-size) * .15) #0003;box-sizing:border-box;min-width:0;min-height:0;width:var(--board-grid-size);height:var(--board-grid-size);aspect-ratio:1}.board-cell{background-color:tan;border:calc(var(--piece-base-size) * .03) solid #8B4513;border-radius:calc(var(--piece-base-size) * .15);display:flex;align-items:flex-end;justify-content:center;cursor:pointer;width:100%;height:100%;box-sizing:border-box;transition:none}.board-cell:hover{background-color:#deb887;border-color:sienna}.board-cell.winning-cell{background-color:gold!important;border-color:orange!important;box-shadow:0 0 calc(var(--piece-base-size) * .3) #ffd700cc;animation:winningPulse 1.5s infinite}.board-cell.winning-cell:hover{background-color:gold!important;transform:none!important}.board-cell.last-move-cell{border-color:#dc143c!important}.board-cell.game-over{cursor:default}.board-cell.game-over:hover{background-color:tan;border-color:#8b4513;transform:none}@keyframes winningPulse{0%,to{box-shadow:0 0 calc(var(--piece-base-size) * .3) #ffd700cc}50%{box-shadow:0 0 calc(var(--piece-base-size) * .5) gold}}.control-panel-area{grid-area:controls;background:#ffffffe6;border-radius:var(--board-border-radius);box-shadow:0 var(--shadow-small) var(--board-border-radius) #0000001a;gap:var(--spacing-xxl);min-height:var(--min-height-standard)}.game-buttons{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;font-weight:700;width:100%;height:100%}.new-game-button{padding:var(--spacing-medium) var(--spacing-xl);border:none;border-radius:var(--spacing-medium);cursor:pointer;font-size:var(--font-xl);transition:all .2s ease;white-space:nowrap;background:linear-gradient(45deg,#28a745,#20c997);color:#fff}.new-game-button:hover{transform:translateY(var(--transform-hover));box-shadow:0 var(--shadow-small) var(--shadow-medium) #28a7454d}.ai-config-button{padding:var(--spacing-medium) var(--spacing-xl);border:none;border-radius:var(--spacing-medium);cursor:pointer;font-size:var(--font-xl);transition:all .2s ease;white-space:nowrap;background:linear-gradient(45deg,#007bff,#0056b3);color:#fff}.ai-config-button:hover{transform:translateY(var(--transform-hover));box-shadow:0 var(--shadow-small) var(--shadow-medium) #007bff4d}@media (orientation: portrait){.control-panel-area{min-height:auto}.new-game-button,.ai-config-button{font-size:var(--font-medium);padding:var(--spacing-small) var(--spacing-small);margin:var(--spacing-medium)}}.piece-set{background:#ffffffe6;border-radius:var(--board-border-radius);padding:calc(var(--piece-base-size) * .15);box-shadow:0 calc(var(--piece-base-size) * .03) calc(var(--piece-base-size) * .12) #0000001a;margin:calc(var(--piece-base-size) * .12) 0;display:flex;flex-direction:column;align-items:center;width:fit-content;height:fit-content}.pieces-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--grid-gap);justify-items:center;min-width:0;min-height:0;width:var(--pieces-grid-size);height:var(--pieces-grid-size);aspect-ratio:1;max-width:100%;max-height:100%}.piece-slot{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;background:#f8f9fa;border:calc(var(--piece-base-size) * .03) solid #e9ecef;border-radius:calc(var(--piece-base-size) * .1);transition:all .2s ease}.piece-slot:hover{background:#f1f3f4;border-color:#dee2e6;transform:translateY(calc(var(--piece-base-size) * -.03));box-shadow:0 calc(var(--piece-base-size) * .03) calc(var(--piece-base-size) * .12) #0000001a}.pieces-grid.disabled{pointer-events:none}.pieces-grid.disabled .piece-slot{cursor:not-allowed}:root{--piece-base-size: min(6.4vh, 4.5vw);--piece-shadow-padding: calc(var(--piece-base-size) * .1);--board-grid-size: calc(var(--piece-base-size) * 10);--pieces-grid-size: calc(var(--piece-base-size) * 9);--board-padding: calc(var(--piece-base-size) * .3);--board-border-radius: calc(var(--piece-base-size) * .2);--header-height: calc(var(--piece-base-size) * 1);--grid-gap: calc(var(--piece-base-size) * .1);--font-tiny: calc(var(--piece-base-size) * .1);--font-small: calc(var(--piece-base-size) * .25);--font-medium: calc(var(--piece-base-size) * .35);--font-large: calc(var(--piece-base-size) * .45);--font-xl: calc(var(--piece-base-size) * .6);--font-xxl: calc(var(--piece-base-size) * .75);--font-huge: calc(var(--piece-base-size) * 1);--font-close-button: calc(var(--piece-base-size) * .7);--spacing-tiny: calc(var(--piece-base-size) * .03);--spacing-xs: calc(var(--piece-base-size) * .05);--spacing-small: calc(var(--piece-base-size) * .08);--spacing-medium: calc(var(--piece-base-size) * .12);--spacing-large: calc(var(--piece-base-size) * .15);--spacing-xl: calc(var(--piece-base-size) * .2);--spacing-xxl: calc(var(--piece-base-size) * .3);--spacing-huge: calc(var(--piece-base-size) * .4);--board-border-width: calc(var(--piece-base-size) * .2);--button-gap: calc(var(--piece-base-size) * 1);--modal-width-small: calc(var(--piece-base-size) * 8);--modal-width-large: calc(var(--piece-base-size) * 10);--modal-shadow: calc(var(--piece-base-size) * .5);--player-info-width: calc(var(--piece-base-size) * 7);--staging-area-width: calc(var(--piece-base-size) * 3);--staging-area-height: calc(var(--piece-base-size) * 2.2);--min-height-standard: calc(var(--piece-base-size) * 1);--blur-effect: calc(var(--piece-base-size) * .06);--shadow-small: calc(var(--piece-base-size) * .06);--shadow-medium: calc(var(--piece-base-size) * .12);--transform-hover: calc(var(--piece-base-size) * -.03)}@media (orientation: portrait){:root{--piece-base-size: 3.8dvh}}.app{height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:calc(var(--piece-base-size) * .3);box-sizing:border-box;display:flex;align-items:stretch;justify-content:center;overflow:hidden;font-size:var(--font-medium)}.game-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:calc(var(--piece-base-size) * .2);width:100%;height:100%;min-height:0;grid-template-areas:"header header" "board pieces" "message controls"}.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-medium);background:#ffffffe6;border-radius:var(--board-border-radius);padding:calc(var(--header-height) * .2) calc(var(--header-height) * .3);box-shadow:0 4px 12px #0000001a;height:100%;box-sizing:border-box}.header h1{margin:0;color:#333;font-size:var(--font-huge);font-family:Times New Roman,Georgia,serif;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.1);flex:1;text-align:center}.header-buttons{display:flex;gap:calc(var(--header-height) * .15);align-items:center}.header-button{padding:calc(var(--header-height) * .12) calc(var(--header-height) * .25);background:linear-gradient(45deg,#6c757d,#495057);color:#fff;border:none;border-radius:calc(var(--header-height) * .1);font-size:var(--font-medium);font-weight:500;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;min-width:calc(var(--header-height) * 1)}.header-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #6c757d4d;background:linear-gradient(45deg,#5a6268,#3d4146)}.game-message-area{grid-area:message;display:flex;align-items:center;justify-content:space-between;background:#ffffffe6;border-radius:var(--board-border-radius);padding:0 var(--spacing-xxl);box-shadow:0 var(--shadow-small) var(--board-border-radius) #0000001a;min-height:var(--min-height-standard);gap:var(--spacing-xxl)}.current-player-info{width:var(--player-info-width);flex-shrink:0;overflow:hidden;font-weight:700;font-size:var(--font-large)}.player-status{text-align:left;color:#333;margin:0}.player-status.winner-announcement,.player-status.tie-announcement{font-size:var(--font-xl);font-weight:700;padding:var(--spacing-medium) var(--spacing-xl);border-radius:var(--spacing-medium);background:linear-gradient(45deg,gold,orange);color:#333;text-shadow:var(--spacing-tiny) var(--spacing-tiny) var(--spacing-small) rgba(0,0,0,.1);animation:pulse 2s infinite;text-align:center}.game-over-status{text-align:center;color:#d63384}.staging-area{width:var(--staging-area-width);height:var(--staging-area-height);border:var(--spacing-xs) solid #8B4513;border-radius:calc(var(--piece-base-size) * .13);margin:var(--spacing-small) var(--spacing-small);background:#e8e8e8;display:flex;align-items:end;justify-content:center;transition:opacity .3s ease,border-color .3s ease;position:relative;flex-shrink:0}.staging-area.disabled{opacity:.5;border-color:#ccc}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.available-pieces-area{grid-area:pieces;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffffe6;border-radius:var(--board-border-radius);padding:0;box-shadow:0 var(--shadow-small) var(--board-border-radius) #0000001a;overflow:hidden;min-width:0;min-height:0}.available-pieces-area h3{color:#333;margin:0;font-size:var(--font-large);text-align:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(calc(var(--piece-base-size) * .06));backdrop-filter:blur(calc(var(--piece-base-size) * .06))}.ai-config-modal{background:#fff;border-radius:var(--board-border-radius);box-shadow:0 calc(var(--piece-base-size) * .12) calc(var(--piece-base-size) * .5) #0000004d;max-width:calc(var(--piece-base-size) * 8);width:90%;max-height:80vh;overflow-y:auto}.rules-modal,.about-modal{background:#fff;border-radius:var(--board-border-radius);box-shadow:0 calc(var(--piece-base-size) * .12) calc(var(--piece-base-size) * .5) #0000004d;max-width:calc(var(--piece-base-size) * 10);width:90%;max-height:85vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--piece-base-size) * .3);border-bottom:1px solid #eee}.modal-header h3{margin:0;color:#333;font-size:var(--font-large)}.close-button{background:none;border:none;font-size:var(--font-close-button);cursor:pointer;color:#666;width:calc(var(--piece-base-size) * .5);height:calc(var(--piece-base-size) * .5);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s;outline:none;box-shadow:none}.close-button:focus{outline:none;box-shadow:none}.close-button:active{outline:none;box-shadow:none}.close-button:hover{background:#f0f0f0}.modal-content{padding:calc(var(--piece-base-size) * .3)}.ai-type-selection{display:flex;gap:calc(var(--piece-base-size) * .3);margin-bottom:calc(var(--piece-base-size) * .3)}.ai-type-selection label{display:flex;align-items:center;gap:calc(var(--piece-base-size) * .12);padding:calc(var(--piece-base-size) * .15) calc(var(--piece-base-size) * .25);border:calc(var(--piece-base-size) * .03) solid #ddd;border-radius:calc(var(--piece-base-size) * .12);cursor:pointer;transition:all .2s;background:#fff}.ai-type-selection label:hover{border-color:#007bff;background:#f8f9fa}.ai-type-selection input[type=radio]:checked+span{font-weight:700}.ai-type-selection input[type=radio]:checked{accent-color:#007bff}.ai-players-modal{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--piece-base-size) * .3);margin-bottom:calc(var(--piece-base-size) * .3);padding:calc(var(--piece-base-size) * .25);border:1px solid #ddd;border-radius:calc(var(--piece-base-size) * .12);background:#f0f8ff4d}.ai-players-modal>label{font-weight:700;margin-bottom:0;display:block;color:#333;flex-shrink:0}.ai-player-modal{display:flex;align-items:center}.ai-player-modal label{display:flex;align-items:center;gap:calc(var(--piece-base-size) * .12);font-size:var(--font-medium);color:#333;cursor:pointer;font-weight:400;margin:0}.ai-player-modal input[type=checkbox]{transform:scale(1.2)}.basic-ai-config{border:1px solid #ddd;border-radius:calc(var(--piece-base-size) * .12);padding:calc(var(--piece-base-size) * .25);background:#fff8f080;margin-bottom:calc(var(--piece-base-size) * .3)}.basic-ai-config>label{font-weight:700;margin-bottom:calc(var(--piece-base-size) * .15);display:block;color:#333}.difficulty-selection{display:flex;gap:calc(var(--piece-base-size) * .15);flex-wrap:wrap}.difficulty-selection label{display:flex;align-items:center;gap:calc(var(--piece-base-size) * .1);padding:calc(var(--piece-base-size) * .12) calc(var(--piece-base-size) * .2);border:1px solid #ccc;border-radius:calc(var(--piece-base-size) * .1);cursor:pointer;background:#fff;transition:all .2s;font-size:var(--font-small)}.difficulty-selection label:hover{border-color:#007bff;background:#f8f9fa}.difficulty-selection label.selected{border-color:#007bff;background:#e3f2fd;font-weight:700}.config-group{margin-bottom:calc(var(--piece-base-size) * .3)}.config-group label{display:block;margin-bottom:calc(var(--piece-base-size) * .12);font-weight:500;color:#333}.config-group input[type=range]{width:100%;margin-top:calc(var(--piece-base-size) * .08)}.config-group input[type=checkbox]{margin-right:calc(var(--piece-base-size) * .12);transform:scale(1.1)}.mcts-config{border:1px solid #ddd;border-radius:calc(var(--piece-base-size) * .12);padding:calc(var(--piece-base-size) * .25);background:#f0f8ff80;margin-bottom:calc(var(--piece-base-size) * .3)}.rules-section,.about-section{margin-bottom:calc(var(--piece-base-size) * .3);padding-bottom:calc(var(--piece-base-size) * .25);border-bottom:1px solid #f0f0f0}.rules-section:last-child,.about-section:last-child{border-bottom:none;margin-bottom:0}.rules-section h4,.about-section h4{color:#333;margin:0 0 calc(var(--piece-base-size) * .15) 0;font-size:var(--font-small);font-weight:600}.rules-section p,.about-section p{margin:calc(var(--piece-base-size) * .12) 0;color:#555;line-height:1.5}.rules-section ul,.rules-section ol,.about-section ul{margin:calc(var(--piece-base-size) * .12) 0;padding-left:calc(var(--piece-base-size) * .3);color:#555;line-height:1.5}.rules-section li,.about-section li{margin-bottom:calc(var(--piece-base-size) * .08)}.rules-section strong,.about-section strong{color:#333;font-weight:600}@media (orientation: portrait){.game-grid{grid-template-columns:auto;grid-template-rows:auto 1fr auto 1fr auto;grid-template-areas:"header" "board" "message" "pieces" "controls";gap:calc(var(--piece-base-size) * .1)}.app{padding:calc(var(--piece-base-size) * .1)}.game-message-area{padding:0 calc(var(--piece-base-size) * .2)}}