#root{width:100%;min-height:100vh;margin:0;display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box;padding:0;background-color:#353535;-webkit-user-select:none;user-select:none}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}.card{padding:2em}.read-the-docs{color:#888}.piece{transition:top .3s ease,left .3s ease}.app-container{display:flex;margin-left:140px;gap:20px;padding:0;align-items:flex-start;max-width:1400px;box-sizing:border-box;height:auto;flex-direction:row}.board-wrapper{position:relative;flex:0 0 1fr;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box;min-width:300px}.right-column{width:1fr;position:relative;display:flex;flex-direction:column;gap:10px;flex:0 0 1fr;box-sizing:border-box;min-width:300px;align-items:flex-start}.board-grid{width:1fr;max-width:none;aspect-ratio:1 / 1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:4px;background-color:#d79e6e;box-sizing:border-box;position:relative}.tutorial-overlay-container{position:fixed;bottom:30px;left:20px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;z-index:999999999;max-width:255px}.tutorial-avatar{width:50px;height:50px;border-radius:20%;border:4px solid white;background-color:#ddffd0;box-shadow:0 8px 24px #0003}.tutorial-dialog-box{background-color:#fff;padding:20px;border-radius:24px 24px 24px 0;box-shadow:0 10px 30px #00000026;text-align:left}.tutorial-title{margin:0 0 8px;color:#57724c;font-size:18px;font-weight:700;letter-spacing:1px}.tutorial-message{margin:0 0 14px;color:#333;font-size:15px;line-height:1.5}.tutorial-action-container{display:flex;gap:10px;justify-content:flex-start}.tutorial-btn-base{padding:8px 20px;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:16px;transition:all .2s ease}.tutorial-btn-next{background-color:#829e79}.tutorial-btn-back{background-color:#e0e0e0;color:#555;cursor:pointer}.tutorial-btn-finish{background-color:#e6a037;cursor:pointer}.board-grid{width:min(573px,86vw);aspect-ratio:1 / 1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:0px;background-color:#d79e6e;box-sizing:border-box;position:relative}.board-container.flipped{transform:rotate(180deg)}.board-square{width:100%;height:100%;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center}.board-labels-left{position:absolute;left:.3rem;top:0;height:100%;display:flex;flex-direction:column;justify-content:space-around;font-family:poppins,sans-serif;font-weight:600;font-size:clamp(10px,1.2vw,14px);z-index:30}.board-labels-left div:nth-child(odd){color:#f1f3e0}.board-labels-left div:nth-child(2n){color:#a1bc98}.board-labels-bottom{position:absolute;bottom:.3rem;left:0;width:100%;display:flex;justify-content:space-around;font-family:poppins,sans-serif;font-weight:600;font-size:clamp(10px,1.2vw,14px);z-index:30}.board-labels-bottom div:nth-child(odd){color:#a1bc98}.board-labels-bottom div:nth-child(2n){color:#f1f3e0}.board-container.flipped .board-labels-left div:nth-child(odd){color:#a1bc98}.board-container.flipped .board-labels-left div:nth-child(2n){color:#f1f3e0}.board-container.flipped .board-labels-bottom div:nth-child(odd){color:#f1f3e0}.board-container.flipped .board-labels-bottom div:nth-child(2n){color:#a1bc98}.pieces-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.piece-circle{width:80%;height:80%;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:grab;transition:transform .12s ease,box-shadow .12s ease}.owner-p1 .piece-circle{background:radial-gradient(circle,#f1f1f1,#e6e6e6);border:7px solid #cbcbcb;color:#23232300;box-shadow:0 0 1px 1px #5f5f5f}.owner-p2 .piece-circle{background:radial-gradient(circle,#585858,#3d3d3d);border:7px solid #383838;color:#f1f1f100}.piece-stack-item{position:absolute;left:50%;transform:translate(-50%)}.highlight-dot{width:25%;height:25%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.panel{padding:0;background-color:#a8b6a375;border-radius:0;width:100%;box-sizing:border-box}.move-panel{display:flex;position:relative;flex-direction:row}.move-log-mobile{display:none}.stockpile-title-row{display:flex}.stockpile-mobile{width:100%;position:relative;display:none;flex-direction:column;gap:10px;flex:0 0 1fr;box-sizing:border-box;min-width:300px;align-items:flex-start}.stockpile-desktop{width:100%;position:relative;display:flex;flex-direction:column;gap:10px;flex:0 0 1fr;box-sizing:border-box;min-width:300px;align-items:flex-start}.tower-grid{display:grid;grid-template-columns:repeat(3,1fr);justify-content:space-around;text-align:center;padding:16px}.tier-label{font-weight:600;font-family:poppins;color:#252525;font-size:20px}.tier-placeholder{width:clamp(53px,6vw,53px);height:clamp(53px,6vw,53px);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#666;font-size:clamp(14px,1.6vw,18px)}.stock-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;width:100%;box-sizing:border-box;padding:16px}.stock-item{width:42px;height:42px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border-radius:50%;box-sizing:border-box;position:relative}.count-badge{position:absolute;top:-40%;right:-40%;width:clamp(16px,3vw,20px);height:clamp(16px,3vw,20px);border-radius:50%;background:#82a376;display:flex;align-items:center;justify-content:center;font-family:poppins;font-size:clamp(9px,1.6vw,12px);font-weight:600;color:#f1f1f1}.rules-overlay{position:fixed;inset:0;background-color:#353535;display:flex;align-items:center;justify-content:center;z-index:3000;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.rules-card{display:flex;flex-direction:row;width:90%;max-width:1000px;height:500px;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 12px 30px #0006}.rules-text-side{width:35%;padding:30px;display:flex;flex-direction:column;justify-content:center;text-align:left;background-color:#404040e5}.rules-image-side{flex:1;background-color:#6a865f;display:flex;align-items:center;justify-content:center;padding:20px}.rules-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.rules-title{font-size:26px;font-weight:700;line-height:1.2;color:#f1f1f1;margin-top:10px;margin-bottom:0;text-transform:uppercase}.rules-paragraph{font-size:16px;line-height:1.6;color:#f1f1f1;margin-top:10px;margin-bottom:30px}.rules-nav-group{display:flex;align-items:center;gap:20px;margin-top:auto}.rules-btn-base{padding:12px 24px;border-radius:10px;border:none;color:#fff;font-weight:700;transition:none}.rules-btn-nav{background-color:#829e79}.rules-btn-exit{background-color:#e6a037}.rules-page-indicator{font-weight:700;color:#999;font-size:14px}.rules-close-btn{position:absolute;top:10px;right:10px;border:none;font-size:20px;width:35px;height:35px;background-color:transparent;color:#f1f1f1;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;z-index:10}.rules-btn-nav:hover{background-color:#829e79!important}.rules-btn-exit:hover{background-color:#e6a037!important}.rules-close-btn:hover{color:#f1f1f1!important}@media(max-width:1024px){#root{width:100%;overflow-x:hidden}.app-container{position:relative;justify-content:center;margin-left:0;gap:10px;margin-top:20px}.right-column{width:40%;position:relative;display:flex;flex-direction:column;gap:10px;flex:0 0 1fr;box-sizing:border-box;min-width:300px;align-items:flex-start}.board-grid{width:55vw;max-width:500px}.stock-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;box-sizing:border-box;padding:16px}.move-panel{flex-direction:column;width:100%}}@media(max-width:768px){#root{width:100%;overflow-x:hidden}.app-container{flex-direction:column;align-items:flex-start;gap:0px;padding:0;width:98%;margin:0;max-width:680px}.panel{background-color:#a8b6a31a}.move-panel{display:none;position:relative;flex-direction:column}.move-log-mobile{display:flex;height:30px;min-width:100%;background-color:#a8b6a300;align-items:center}.move-log-mobile-list{-ms-overflow-style:none;scrollbar-width:none}.move-log-mobile-list::-webkit-scrollbar{display:none;align-content:center}.stockpile-mobile{display:flex}.stockpile-desktop{display:none}.stock-grid{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:12px;padding:8px 16px 12px;scrollbar-width:none;-ms-overflow-style:none}.stock-grid::-webkit-scrollbar{display:none}.stock-item{flex:0 0 auto}.count-badge{top:-15%;right:-15%;width:20px;height:20px;font-size:12px}.board-wrapper{width:100%;justify-content:center}.board-grid{width:98vw;max-width:680px;height:auto}.board-labels-left{left:-2rem;font-size:14px}.board-labels-bottom{bottom:-2rem;font-size:14px}.stockpile-title-row{display:none!important}.tutorial-overlay-container{position:relative;bottom:0;left:0;max-width:100%;width:100%;margin:0 auto;align-items:flex-start}.tutorial-dialog-box{position:relative;padding:15px;border-radius:0;width:95.5%;min-height:110px}.tutorial-title{font-size:16px;margin:0 0 4px}.tutorial-message{font-size:14px;margin:0 20px 10px 0}.tutorial-avatar{display:none}.tutorial-btn-base{font-size:14px}.rules-card{flex-direction:column;height:90vh;width:90%;max-height:650px}.rules-image-side{padding:10px;order:1;height:50%}.rules-text-side{width:100%;padding:20px;order:2;height:50%;box-sizing:border-box}.rules-title{font-size:20px;margin-top:0}.rules-paragraph{font-size:14px;line-height:1.5;margin-bottom:15px;overflow-y:auto}.rules-btn-base{padding:8px 16px;font-size:13px;border-radius:8px}.rules-nav-group{gap:12px}.owner-p1 .piece-circle{background:radial-gradient(circle,#f1f1f1,#e6e6e6);border:1.1vw solid #cbcbcb;color:#23232300;box-shadow:0 0 1px 1px #5f5f5f}.owner-p2 .piece-circle{background:radial-gradient(circle,#585858,#3d3d3d);border:1.1vw solid #383838;color:#f1f1f100}.highlight-dot{width:25%;height:25%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}@media(max-width:420px){#root{width:100%;overflow-x:hidden}.app-container{flex-direction:column;align-items:flex-start;gap:0px;padding:0;width:98%;margin:0}.panel{background-color:#a8b6a31a}.move-panel{display:none;position:relative;flex-direction:column}.move-log-mobile{display:flex;height:30px;min-width:100%;background-color:#a8b6a300;align-items:center}.move-log-mobile-list{-ms-overflow-style:none;scrollbar-width:none}.move-log-mobile-list::-webkit-scrollbar{display:none;align-content:center}.stockpile-mobile{display:flex}.stockpile-desktop{display:none}.stock-grid{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:12px;padding:8px 16px 12px;scrollbar-width:none;-ms-overflow-style:none}.stock-grid::-webkit-scrollbar{display:none}.stock-item{flex:0 0 auto}.count-badge{top:-15%;right:-15%;width:20px;height:20px;font-size:12px}.board-wrapper{width:100%;justify-content:center}.board-grid{width:98vw;height:auto}.board-labels-left{left:-2rem;font-size:10px}.board-labels-bottom{bottom:-2rem;font-size:10px}.stockpile-title-row{display:none!important}.tutorial-overlay-container{position:relative;bottom:0;left:0;max-width:100%;width:100%;margin:0 auto;align-items:flex-start}.tutorial-dialog-box{position:relative;padding:15px;border-radius:0;width:92%;min-height:110px}.tutorial-title{font-size:16px;margin:0 0 4px}.tutorial-message{font-size:14px;margin:0 20px 10px 0}.tutorial-avatar{display:none}.tutorial-btn-base{font-size:14px}.rules-card{flex-direction:column;height:90vh;width:90%;max-height:650px}.rules-image-side{padding:10px;order:1;height:40%}.rules-text-side{width:100%;padding:20px;order:2;height:60%;box-sizing:border-box}.rules-title{font-size:20px;margin-top:0}.rules-paragraph{font-size:13px;line-height:1.5;margin-bottom:15px;overflow-y:auto}.rules-btn-base{padding:8px 16px;font-size:13px;border-radius:8px}.rules-nav-group{gap:12px}.owner-p1 .piece-circle{background:radial-gradient(circle,#f1f1f1,#e6e6e6);border:1.1vw solid #cbcbcb;color:#23232300;box-shadow:0 0 1px 1px #5f5f5f}.owner-p2 .piece-circle{background:radial-gradient(circle,#585858,#3d3d3d);border:1.1vw solid #383838;color:#f1f1f100}.highlight-dot{width:25%;height:25%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif,poppins;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;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;min-width:320px;min-height:100vh;display:block}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:poppins;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:active{background-color:#3f3f3f;transform:scale(.9)}button:focus,button:focus-visible{outline:none}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}