body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a2e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.Row{display:flex;flex-direction:row}.App,.Col{display:flex;flex-direction:column}.App{color:#fff;text-align:center}.App,.App-header{align-items:center}.App-header{display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#09d3ac}.FrontPage{align-items:center;background:#1a1a2e;color:#eee;display:flex;flex-direction:column;font-family:Roboto,sans-serif;min-height:100vh;overflow:hidden;position:relative}.FrontPage-bg{--mx:0;--my:0;inset:0;overflow:hidden;pointer-events:none;position:fixed;z-index:0}.FrontPage-bg-grid{background-image:radial-gradient(circle,#ffffff0a 1px,#0000 0);background-size:40px 40px;inset:0;position:absolute;transform:translate(calc(var(--mx)*-8px),calc(var(--my)*-8px));transition:transform .6s ease-out}.FrontPage-bg-shape{border-radius:50%;filter:blur(80px);opacity:.35;position:absolute;transition:transform .5s ease-out;will-change:transform}.shape-1{animation:float-1 18s ease-in-out infinite,hue-cycle-1 25s linear infinite;background:radial-gradient(circle,#7c83ff 0,#0000 70%);height:420px;left:-60px;top:-80px;transform:translate(calc(var(--mx)*30px),calc(var(--my)*25px));width:420px}.shape-2{animation:float-2 22s ease-in-out infinite,hue-cycle-2 30s linear infinite;background:radial-gradient(circle,#ff6ec7 0,#0000 70%);height:350px;right:-80px;top:30%;transform:translate(calc(var(--mx)*-25px),calc(var(--my)*20px));width:350px}.shape-3{animation:float-3 20s ease-in-out infinite,hue-cycle-3 35s linear infinite;background:radial-gradient(circle,#43e97b 0,#0000 70%);bottom:10%;height:300px;left:15%;transform:translate(calc(var(--mx)*20px),calc(var(--my)*-30px));width:300px}.shape-4{animation:float-4 24s ease-in-out infinite,hue-cycle-4 28s linear infinite;background:radial-gradient(circle,#f7971e 0,#0000 70%);height:260px;left:55%;top:55%;transform:translate(calc(var(--mx)*-35px),calc(var(--my)*15px));width:260px}.shape-5{animation:float-5 16s ease-in-out infinite,hue-cycle-5 22s linear infinite;background:radial-gradient(circle,#00c9ff 0,#0000 70%);height:200px;right:25%;top:10%;transform:translate(calc(var(--mx)*18px),calc(var(--my)*-22px));width:200px}.shape-6{animation:float-6 26s ease-in-out infinite,hue-cycle-6 32s linear infinite;background:radial-gradient(circle,#a18cd1 0,#0000 70%);bottom:-60px;height:340px;right:20%;transform:translate(calc(var(--mx)*-20px),calc(var(--my)*28px));width:340px}.shape-7{animation:float-5 28s ease-in-out infinite reverse,hue-cycle-7 40s linear infinite;background:radial-gradient(circle,#fad0c4 0,#0000 70%);height:180px;left:-40px;opacity:.25;top:40%;transform:translate(calc(var(--mx)*22px),calc(var(--my)*18px));width:180px}.shape-8{animation:float-3 30s ease-in-out infinite,hue-cycle-8 36s linear infinite;background:radial-gradient(circle,#667eea 0,#0000 70%);height:240px;left:60%;opacity:.2;top:5%;transform:translate(calc(var(--mx)*-15px),calc(var(--my)*-20px));width:240px}.FrontPage-bg-dot{background:#ffffff26;border-radius:50%;position:absolute;transition:transform .4s ease-out;will-change:transform}.dot-1{animation:twinkle 4s ease-in-out infinite;height:4px;left:22%;top:18%;transform:translate(calc(var(--mx)*40px),calc(var(--my)*35px));width:4px}.dot-2{animation:twinkle 5s ease-in-out 1s infinite;height:6px;right:30%;top:65%;transform:translate(calc(var(--mx)*-45px),calc(var(--my)*30px));width:6px}.dot-3{animation:twinkle 3.5s ease-in-out .5s infinite;height:3px;right:15%;top:35%;transform:translate(calc(var(--mx)*50px),calc(var(--my)*-40px));width:3px}.dot-4{animation:twinkle 6s ease-in-out 2s infinite;bottom:25%;height:5px;left:40%;transform:translate(calc(var(--mx)*-35px),calc(var(--my)*45px));width:5px}.dot-5{animation:twinkle 4.5s ease-in-out .8s infinite;height:4px;left:12%;top:75%;transform:translate(calc(var(--mx)*38px),calc(var(--my)*-32px));width:4px}@keyframes twinkle{0%,to{opacity:.1}50%{opacity:.5}}@keyframes float-1{0%,to{transform:translate(calc(var(--mx)*30px),calc(var(--my)*25px)) scale(1)}33%{transform:translate(calc(60px + var(--mx)*30px),calc(80px + var(--my)*25px)) scale(1.1)}66%{transform:translate(calc(-40px + var(--mx)*30px),calc(40px + var(--my)*25px)) scale(.95)}}@keyframes float-2{0%,to{transform:translate(calc(var(--mx)*-25px),calc(var(--my)*20px)) scale(1)}33%{transform:translate(calc(-70px + var(--mx)*-25px),calc(50px + var(--my)*20px)) scale(1.05)}66%{transform:translate(calc(30px + var(--mx)*-25px),calc(-60px + var(--my)*20px)) scale(.9)}}@keyframes float-3{0%,to{transform:translate(calc(var(--mx)*20px),calc(var(--my)*-30px)) scale(1)}33%{transform:translate(calc(50px + var(--mx)*20px),calc(-70px + var(--my)*-30px)) scale(1.08)}66%{transform:translate(calc(-60px + var(--mx)*20px),calc(30px + var(--my)*-30px)) scale(.92)}}@keyframes float-4{0%,to{transform:translate(calc(var(--mx)*-35px),calc(var(--my)*15px)) scale(1)}33%{transform:translate(calc(-40px + var(--mx)*-35px),calc(-50px + var(--my)*15px)) scale(1.12)}66%{transform:translate(calc(70px + var(--mx)*-35px),calc(40px + var(--my)*15px)) scale(.88)}}@keyframes float-5{0%,to{transform:translate(calc(var(--mx)*18px),calc(var(--my)*-22px)) scale(1)}33%{transform:translate(calc(80px + var(--mx)*18px),calc(30px + var(--my)*-22px)) scale(.9)}66%{transform:translate(calc(-30px + var(--mx)*18px),calc(-50px + var(--my)*-22px)) scale(1.1)}}@keyframes float-6{0%,to{transform:translate(calc(var(--mx)*-20px),calc(var(--my)*28px)) scale(1)}50%{transform:translate(calc(-60px + var(--mx)*-20px),calc(-80px + var(--my)*28px)) scale(1.05)}}@keyframes hue-cycle-1{0%{filter:blur(80px) hue-rotate(0deg)}to{filter:blur(80px) hue-rotate(1turn)}}@keyframes hue-cycle-2{0%{filter:blur(80px) hue-rotate(60deg)}to{filter:blur(80px) hue-rotate(420deg)}}@keyframes hue-cycle-3{0%{filter:blur(80px) hue-rotate(120deg)}to{filter:blur(80px) hue-rotate(480deg)}}@keyframes hue-cycle-4{0%{filter:blur(80px) hue-rotate(180deg)}to{filter:blur(80px) hue-rotate(540deg)}}@keyframes hue-cycle-5{0%{filter:blur(80px) hue-rotate(240deg)}to{filter:blur(80px) hue-rotate(600deg)}}@keyframes hue-cycle-6{0%{filter:blur(80px) hue-rotate(300deg)}to{filter:blur(80px) hue-rotate(660deg)}}@keyframes hue-cycle-7{0%{filter:blur(80px) hue-rotate(30deg)}to{filter:blur(80px) hue-rotate(390deg)}}@keyframes hue-cycle-8{0%{filter:blur(80px) hue-rotate(150deg)}to{filter:blur(80px) hue-rotate(510deg)}}.FrontPage-header,.FrontPage-section{position:relative;z-index:1}.FrontPage-header{box-sizing:border-box;padding:48px 24px 24px;text-align:center;width:100%}.FrontPage-header h1{color:#fff;font-size:48px;font-weight:300;letter-spacing:6px;margin:0}.FrontPage-header p{color:#99a;font-size:15px;letter-spacing:1px;margin:8px 0 0}.FrontPage-mode-wrap{align-items:center;display:flex;flex-direction:column;margin:20px 0 0}.GameMode-selector{background:#16213e99;border-radius:12px;display:inline-flex;gap:6px;justify-content:center;padding:4px}.GameMode-btn{align-items:center;background:#0000;border:none;border-radius:10px;color:#889;cursor:pointer;display:flex;font-family:inherit;font-size:14px;gap:6px;padding:8px 18px;transition:all .2s ease;white-space:nowrap}.GameMode-btn:hover{background:#7c83ff1a;color:#bbc}.GameMode-btn.active{background:#7c83ff33;box-shadow:0 2px 8px #7c83ff26;color:#fff}.GameMode-btn.disabled,.GameMode-btn:disabled{cursor:not-allowed;opacity:.35;pointer-events:auto}.GameMode-icon{font-size:16px}.GameMode-label{font-weight:500;letter-spacing:.5px}.FrontPage-mode-desc{color:#778;font-size:13px;letter-spacing:.3px;line-height:1.5;margin:12px 0 0;max-width:480px;min-height:40px;text-align:center;transition:opacity .25s ease}.FrontPage-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0 8px}.FrontPage-or{align-items:center;color:#556;display:flex;font-size:12px;gap:8px;letter-spacing:1px;text-transform:uppercase}.FrontPage-or:after,.FrontPage-or:before{background:#445;content:"";height:1px;width:28px}.FrontPage-join{align-items:center;display:flex;gap:8px}.FrontPage-join input{background:#16213e;border:1px solid #444;border-radius:4px;color:#eee;font-family:monospace;font-size:16px;letter-spacing:2px;outline:none;padding:8px 12px;transition:border-color .2s;width:160px}.FrontPage-join input:focus{border-color:#7c83ff}.FrontPage-section{box-sizing:border-box;margin-top:16px;max-width:1100px;padding:0 24px;width:100%}.FrontPage-section h2{color:#bbc;font-size:18px;font-weight:400;letter-spacing:1px;margin:0 0 12px}.FrontPage-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-bottom:48px}.FrontPage-empty{color:#667;font-size:14px;grid-column:1/-1;padding:32px 0;text-align:center}.RoomCard{background:#16213e;border:1px solid #2a2a4a;border-radius:8px;cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}.RoomCard:hover{border-color:#7c83ff;box-shadow:0 6px 20px #0006;transform:translateY(-3px)}.RoomCard-thumbnail{align-items:center;aspect-ratio:980/600;background:#0f0f23;display:flex;justify-content:center;overflow:hidden;position:relative;width:100%}.RoomCard-thumbnail img{display:block;height:100%;object-fit:cover;width:100%}.RoomCard-badge{background:#00000080;border-radius:6px;font-size:14px;line-height:1;padding:2px 5px;position:absolute;right:6px;top:6px}.RoomCard-placeholder{color:#334;font-size:13px;font-style:italic}.RoomCard-info{align-items:center;display:flex;justify-content:space-between;padding:10px 12px}.RoomCard-id{color:#ccd;font-family:monospace;font-size:14px;letter-spacing:1px}.RoomCard-users{background:#88ffaa1a;border-radius:10px;color:#8fa;font-size:12px;padding:2px 8px;white-space:nowrap}.Canvas{margin-left:36px;position:absolute}.tools{width:36px}.BrushSizeControl{align-items:center;background:#99a;border:1px solid #666;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;margin-top:-1px;padding:6px 0;width:36px}.BrushSizeValue{line-height:1;min-width:24px}.BrushSizeNumber,.BrushSizeValue{color:#222;font-family:monospace;font-size:12px;text-align:center}.BrushSizeNumber{-moz-appearance:textfield;background:#fff;border:1px solid #888;border-radius:2px;padding:1px 0;width:30px}.BrushSizeNumber::-webkit-inner-spin-button,.BrushSizeNumber::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.BrushSizeSlider{appearance:none;background:#0000;cursor:pointer;direction:rtl;height:90px;width:20px;writing-mode:vertical-lr}.BrushSizeSlider::-webkit-slider-runnable-track{background:#556;border-radius:4px;width:8px}.BrushSizeSlider::-webkit-slider-thumb{appearance:none;background:#ccf;border-radius:50%;cursor:pointer;height:14px;margin-left:-3px;width:14px}.BrushSizeSlider::-moz-range-track{background:#556;border-radius:4px;width:8px}.BrushSizeSlider::-moz-range-thumb{background:#ccf;border:none;border-radius:50%;cursor:pointer;height:14px;width:14px}.CanvasContainer{background:#fff;box-shadow:0 2px 6px 2px #0006}.RemotePointer{border:2px solid;color:#000;pointer-events:none;position:absolute;transition:top .1s linear,left .1s linear;z-index:1}.controls{align-content:flex-start;display:flex;position:absolute}.Container{background:#789;border:2px solid #ccc;box-shadow:1px 1px 4px 3px #0003;display:flex;flex-direction:column;margin-bottom:3px;width:225px}.Layer{height:35px}.ComponentTitle{background-color:#595279;color:#eee;font-size:14px;padding:.3em .6em;text-align:left;vertical-align:center}.ListItem{padding:3px 0}.ListItem:hover{background-color:#ffffff26;cursor:pointer}.SelectedItem,.SelectedItem:hover{background-color:#ffffff4d}.SelectedItem:hover{cursor:default}.HoldButton{align-items:center;background:#b99;border:1px solid #666;border-radius:0;box-sizing:border-box;cursor:pointer;display:flex;height:36px;justify-content:center;margin:-1px 0 0;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:36px}.HoldButton:hover{background:#ebb}.HoldButton--disabled{cursor:default}.HoldButton--disabled,.HoldButton--disabled:hover{background:#a99!important}.HoldButton-fill{background:#a028288c;bottom:0;height:0;left:0;pointer-events:none;position:absolute;width:100%}.HoldButton-fill--active{animation:holdFill .5s linear forwards}@keyframes holdFill{0%{height:0}to{height:100%}}.Container ul{margin:0;padding:0 2px;text-align:left}.LayerListItem{align-items:center;background:#99a;border-bottom:1px solid #0003;border-top:1px solid #0003;color:#fff;display:flex;justify-content:space-between;margin:0;padding:0}.LayerListContainer{display:block;text-align:left}.Handle:hover,.Handle:hover:active{cursor:default}.ChatBox{align-content:space-between;background:#484c64;box-shadow:0 2px 6px 2px #0000004d;display:flex;max-height:200px;max-width:100%;min-width:100%}.ChatMessage{animation-duration:1s;animation-name:fade;margin:0;padding:0 .4em;text-align:left}.ChatMessageUser{-webkit-user-select:none;user-select:none}@keyframes fade{0%{background-color:#ffffff80}to{background-color:initial}}.MsgContainer{display:flex;min-height:100px;overflow-wrap:break-word;overflow-x:hidden;overflow-y:scroll;padding:0 0 2px;word-break:break-word}
/*# sourceMappingURL=main.34e1f39f.css.map*/