html,body{color:#fff;background-color:#0f1016;flex-direction:row;justify-content:center;align-items:center;gap:20px;width:100vw;height:100vh;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;overflow:hidden}#game-ui{background-color:#2b2b40;border:4px solid #3c3c54;border-radius:16px;flex-direction:column;flex:1;max-width:800px;height:95vh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 50px #000c}#main-layout{flex:1;display:flex;overflow:hidden}#canvas-container{background:#181824;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#board-wrapper{flex-direction:column;align-items:center;max-width:95%;max-height:95%;display:flex}#game-header{box-sizing:border-box;background:#181824;flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;display:flex}.header-item{color:#fff;letter-spacing:2px;-webkit-text-stroke:1.25px #fff;text-shadow:0 0 10px #ffffff4d;transform-origin:50%;font-family:Arial Black,Impact,sans-serif;font-size:26px;font-weight:900;transform:translateY(-30px)scaleY(1.3)}#canvas-container canvas{object-fit:contain;border:1px solid #3c3c54;border-radius:8px;flex:1;max-width:100%;min-height:0;box-shadow:0 0 20px #00000080}.side-menu{z-index:20;background:#202030;border-left:2px solid #1a1a25;flex-direction:column;gap:12px;width:110px;max-height:100%;padding:12px 8px;display:flex;overflow-y:auto}.side-menu::-webkit-scrollbar{width:4px}.side-menu::-webkit-scrollbar-track{background:#0000001a}.side-menu::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.hidden{display:none!important}.menu-btn{color:#fff;cursor:pointer;text-align:center;box-sizing:border-box;border:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:11px 6px;font-size:12.5px;font-weight:700;line-height:1.3;transition:transform .1s,filter .2s;display:flex;box-shadow:0 3px #0000004d}.menu-btn:active{transform:translateY(3px);box-shadow:0 0 #0000004d}.menu-btn .icon{margin-bottom:2px;font-size:15px}.menu-btn.blue{background:#3b6bdc}.menu-btn.purple{background:#9d2cb3}.menu-btn.green{color:#fff;background:#00d25b}.menu-btn.orange{background:#ff8c00}.menu-btn.gray{background:#4a4a5e}.menu-btn.pink{background:#f36}.menu-btn.wide{flex-direction:row;padding:12px 20px;font-size:15px}#editor-panel,#material-panel,#script-panel{box-sizing:border-box;background:#2b2b40;border:4px solid #3c3c54;border-radius:16px;flex-direction:column;align-self:flex-start;max-height:95vh;margin-top:2.5vh;padding:18px;display:flex;overflow-y:auto;box-shadow:0 0 50px #00000080}#editor-panel{width:360px}#material-panel,#script-panel{width:300px}#editor-panel::-webkit-scrollbar{width:6px}#material-panel::-webkit-scrollbar{width:6px}#script-panel::-webkit-scrollbar{width:6px}#editor-panel::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}#material-panel::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}#script-panel::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}#editor-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}#material-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}#script-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}#editor-panel::-webkit-scrollbar-thumb:hover{background:#fff6}#material-panel::-webkit-scrollbar-thumb:hover{background:#fff6}#script-panel::-webkit-scrollbar-thumb:hover{background:#fff6}.material-slots-container{flex-direction:column;gap:8px;max-height:240px;margin-top:5px;padding-right:5px;display:flex;overflow-y:auto}.material-slots-container::-webkit-scrollbar{width:4px}.material-slots-container::-webkit-scrollbar-track{background:#0000001a}.material-slots-container::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.material-slot-row{align-items:center;gap:6px;display:flex}.btn-material-slot{color:#a0a0b5;text-align:left;cursor:pointer;background:#ffffff0d;border:1.5px dashed #fff3;border-radius:8px;outline:none;flex:1;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.btn-material-slot:hover{color:#fff;background:#ffffff1a;border-color:#fff6}.btn-material-slot.active{color:#00d25b;background:#00d25b26;border:1.5px solid #00d25b;box-shadow:0 0 10px #00d25b33}.btn-material-slot:not(.empty):not(.active){color:#e0e0e0;background:#ffffff1a;border:1.5px solid #fff6}.btn-material-clear{cursor:pointer;background:#d938381a;border:1px solid #d938384d;border-radius:8px;justify-content:center;align-items:center;width:36px;min-width:36px;height:36px;font-size:14px;transition:all .2s;display:flex}.btn-material-clear:hover{background:#d938384d;border-color:#d93838}.btn-material-clear:active{transform:scale(.95)}#editor-panel h3,#material-panel h3{border-bottom:2px solid #3c3c54;margin-top:0;margin-bottom:20px;padding-bottom:10px;font-size:22px}.settings-section{background:#0003;border-radius:8px;margin-bottom:20px;padding:15px}.settings-section h4{color:#a0a0b5;margin:0 0 15px;font-size:15px}.prob-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.prob-row input[type=range]{flex:1}.prob-row input[type=number]{color:#fff;background:#1a1a25;border:1px solid #444;border-radius:4px;width:70px;padding:6px;font-weight:700}.prob-row label{color:#ddd;width:150px;font-size:14px}.prob-row span{text-align:right;color:#f36;width:40px;font-weight:700}.config-row-pair{justify-content:space-between;gap:12px;margin-bottom:8px;display:flex}.prob-row.compact{flex:1;justify-content:space-between;align-items:center;gap:6px;margin-bottom:0;display:flex}.prob-row.compact label{color:#ddd;width:auto;font-size:12px}.prob-row.compact input[type=number]{color:#fff;background:#1a1a25;border:1px solid #444;border-radius:4px;width:55px;padding:4px 6px;font-size:11px;font-weight:700}.btn-apply{color:#fff;cursor:pointer;background:#3b6bdc;border:none;border-radius:8px;margin-top:auto;padding:15px;font-size:16px;font-weight:700;transition:transform .1s;box-shadow:0 4px #0000004d}.btn-apply:active{transform:translateY(4px);box-shadow:0 0 #0000004d}#loading-overlay{z-index:9999;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loader-box{text-align:center;background:#2b2b40;border:2px solid #3c3c54;border-radius:12px;width:300px;padding:30px}.progress-bar-bg{background:#181824;border-radius:5px;width:100%;height:10px;margin:15px 0;overflow:hidden}#progress-bar-fill{background:#00d25b;width:0%;height:100%;transition:width .1s}#progress-text{color:#a0a0b0;font-size:14px}.palette-row{background:#00000040;border:1px solid #ffffff0d;border-radius:8px;justify-content:flex-start;align-items:center;gap:6px;padding:6px;display:flex}.palette-row-label{color:#a0a0b5;text-transform:uppercase;text-align:right;width:32px;margin-right:4px;font-size:11px;font-weight:900}.palette-block-btn{cursor:pointer;box-sizing:border-box;color:#fffffff2;text-shadow:0 1px 2px #0009;border:2px solid #0000;border-radius:4px;justify-content:center;align-items:center;height:24px;font-size:11px;font-weight:900;transition:all .15s ease-in-out;display:flex;box-shadow:0 2px 4px #0000004d}.palette-block-btn:hover{filter:brightness(1.15);transform:scale(1.1)}.palette-block-btn.active{filter:brightness(1.25);border-color:#fff;transform:scale(1.15);box-shadow:0 0 10px #fff,inset 0 0 4px #00000080}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}