: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:320px;min-height:100vh}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: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}}@font-face{font-family:Atkinson Hyperlegible Next;src:url(/assets/AtkinsonHyperlegibleNextVF-Variable-BwRyMOOp.woff2) format("woff2-variations"),url(/assets/AtkinsonHyperlegibleNextVF-Variable-BwRyMOOp.woff2) format("woff2");font-weight:200 800;font-style:normal italic;font-display:swap}:root{--square-size: clamp(60px, 5.5vw, 80px);--syllomino-half-size: calc(var(--square-size) * .88);--primary-yellow: #ffe047;--emphasis-blue: #6f7ec6;--vibrant-blue: #a1d9e8;--soft-blue: #a5c7f8;--dark-colour: #10121c}#root{max-width:1280px;min-width:1000px;margin:0 auto;padding:.5rem;text-align:center;width:100%;color:var(--dark-colour);background-color:#e5e5f7;background-image:linear-gradient(#c0dbef 1px,transparent 1px),linear-gradient(to right,#c0dbef 1px,#fafcfc 1px);background-size:20px 20px;height:95vh;max-height:800px;overflow:hidden;display:flex;justify-content:center;align-items:center}body{font-family:Atkinson Hyperlegible Next,sans-serif!important;font-weight:400!important;font-style:normal!important}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.play-area{display:flex;flex-direction:row;width:100%;justify-content:center;gap:50px;align-items:space-around;margin-top:1%}.setup-area{background:var(--soft-blue);width:calc(var(--square-size) * 3.5);max-height:calc(var(--square-size) * 8);border:5px solid var(--soft-blue);border-radius:15px;-webkit-box-shadow:5px 5px 6px 5px #0000003b;box-shadow:5px 5px 6px 5px #0004;display:flex;flex-direction:column;align-items:center}.setup-bottom .pushable{margin-top:10px}@media screen and (max-width: 1400px){.setup-bottom .pushable{margin-top:5px}.setup-bottom .pushable .front{padding:10px}}@media screen and (max-width: 1250px){.setup-bottom .pushable{margin-top:3px}.setup-bottom .pushable .front{padding:3px}}#rotate-btn,#draw-card-btn{position:absolute}#rotate-btn{top:1em;right:1em;width:calc(var(--square-size) * .6);height:calc(var(--square-size) * .6)}#draw-card-btn{bottom:.5em}.face-card-container{background:#ffffffac;width:calc(var(--square-size) * 3.1);height:calc(var(--square-size) * 4);min-height:300px;border-radius:15px;display:flex;justify-content:center;align-items:center;margin-bottom:5%;margin-top:2%;position:relative;-webkit-box-shadow:2px 2px 3px 2px #00000015;box-shadow:2px 2px 3px 2px #00000015}.drag-button{padding:0;position:relative;z-index:1000;width:fit-content;height:fit-content;border-radius:1rem}.mino-end{width:fit-content;height:inherit;border-radius:inherit;background:#000}.syllomino-placeholder{width:calc(var(--syllomino-half-size) * 2);height:var(--syllomino-half-size)}.syllomino{border:.42rem outset black;border-radius:.8rem;background-color:#000;position:relative;z-index:4;-webkit-box-shadow:10px 10px 15px -5px #00000063;box-shadow:10px 10px 15px -5px #0000007e;background:#000;perspective:100rem;font-size:calc(var(--square-size) * .19)}.drop-space .syllomino{-webkit-box-shadow:0px 0px 0px 0px #00000063;box-shadow:0 0 #0000007e}.syllomino.horizontal{width:calc(var(--syllomino-half-size) * 2);height:var(--syllomino-half-size)}.syllomino.vertical{width:var(--syllomino-half-size);height:calc(var(--syllomino-half-size) * 2)}.vertical .mino-a,.vertical .mino-b{background:linear-gradient(180deg,#000,#fafaee 4% 96%,#000)}.horizontal .mino-a{background:linear-gradient(270deg,#000,#fafaee 4% 96%,#9c9c9c)}.horizontal .mino-b{background:linear-gradient(270deg,#9c9c9c,#fafaee 4% 96%,#9c9c9c)}.end{width:var(--syllomino-half-size);height:var(--syllomino-half-size);max-height:var(--syllomino-half-size);display:flex;justify-content:center;align-items:center}.text-skew{-webkit-hyphens:auto;hyphens:auto;word-break:normal;text-overflow:ellipsis}.end.disabled:hover{outline:none;border:none}.end.disabled:focus{outline:none;border:none}.end-image{max-width:calc(var(--syllomino-half-size) * .9);max-height:calc(var(--syllomino-half-size) * .9);object-fit:contain}.play-square{width:var(--square-size);height:var(--square-size);padding:0;margin:0}.play-square.checkered{background-color:var(--soft-blue);border-radius:3px}.board-container{position:relative;border:5px solid var(--soft-blue);border-radius:15px;height:fit-content;background-color:#fffffff3;z-index:0;-webkit-box-shadow:5px 5px 6px 5px #0000003b;box-shadow:5px 5px 6px 5px #0004}.board{position:relative;z-index:-1}.drop-board{position:relative;z-index:1}.drop-board.horizontal{left:calc(var(--square-size) / 2);width:0px;height:0px}.drop-board.vertical{top:calc(var(--square-size) / 2)}.drop-space{min-width:calc(var(--square-size) / 2);width:calc(var(--square-size) / 2);height:calc(var(--square-size) / 2);margin:calc(var(--square-size) / 4);border-radius:calc(var(--square-size) / 3);position:relative;z-index:2}.drop-space.highlighted{background-color:#f3ff6b82;-webkit-box-shadow:0px 0px 40px 11px rgba(243,255,107,.511);-moz-box-shadow:0px 0px 40px 11px rgb(243,255,107);box-shadow:0 0 40px 11px #f3ff6b}.drop-space .syllomino{position:absolute;z-index:3}.drop-board.horizontal .drop-space .syllomino{left:calc(var(--square-size) * -.75 * .9);top:calc(var(--square-size) * -.25)}.drop-board.vertical .drop-space .syllomino{left:calc(var(--square-size) * -.25);top:calc(var(--square-size) * -.75 * .94)}.pushable.disabled{filter:grayscale()}.pushable{position:relative;border:none;background:transparent;padding:0;cursor:pointer;outline-offset:4px;transition:filter .25s;width:80%;margin-bottom:5%;height:17%}.shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:#00000040;will-change:transform;transform:translateY(2px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:linear-gradient(to left,#524400,#a38800 8% 92%,#524400)}.front{display:block;position:relative;padding:12px 8px;border-radius:12px;color:var(--dark-colour);background:var(--primary-yellow);will-change:transform;transform:translateY(-4px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.pushable:hover{filter:brightness(110%)}.pushable:hover .front{transform:translateY(-6px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.pushable:active .front{transform:translateY(-2px);transition:transform 34ms}.pushable:hover .shadow{transform:translateY(4px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.pushable:active .shadow{transform:translateY(1px);transition:transform 34ms}.pushable:focus:not(:focus-visible){outline:none}@keyframes pulse{0%{box-shadow:0 0 #ff0000b3}70%{box-shadow:0 0 0 10px #f000}to{box-shadow:0 0 #f000}}.pushable.is-active{animation:pulse 1.5s infinite}.pushable.is-active .shadow{background:#800015bf}.pushable.is-active .edge{background:linear-gradient(to left,#900,red 8% 92%,#900)}.pushable.is-active .front{color:#fff;background-color:#e60000}.subtle-btn{background-color:transparent;display:flex;justify-content:center;align-items:center;padding:0}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;background-color:#fff;border:2px solid #000;box-shadow:24px;padding:15px;max-height:80vh;overflow:auto}.winning-modal{padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:large}.instructions-c{width:170px;display:flex;justify-content:end;text-align:right;align-items:end;position:absolute;bottom:10px;right:40px;font-size:small}.game-info{height:95%;display:flex;flex-direction:column;justify-content:space-evenly;background-color:#a1d9e8eb;width:clamp(400px,90%,1000px);margin-bottom:3%;border-radius:10px;padding:0% 2%;-webkit-box-shadow:2px 2px 5px 2px #0000007a;box-shadow:2px 2px 5px 2px #0000007a;border:5px solid var(--vibrant-blue);justify-self:center;position:relative}.sun{width:10%;margin-bottom:0;padding-bottom:0;align-self:center}h1{margin-top:0;padding-top:0;margin-bottom:5px;text-shadow:1px 1px 0 hsl(230,45%,67%),2px 2px 0 hsl(230,45%,67%),3px 3px 0 hsl(230,45%,67%),4px 4px 0 hsl(230,45%,67%),5px 5px 0 hsl(205,45%,67%);font-size:2.5rem}.setup-section{display:flex;flex-direction:row;align-items:flex-start;border-bottom:dotted 4px var(--soft-blue);min-height:9rem;padding-top:0;padding-bottom:10px}.setup-split{width:50%;display:flex;flex-direction:row}.setup-left{text-align:left;width:40%}.setup-split .setup-left{width:60%}#player-number{padding-left:3%;border-left:dotted 4px var(--soft-blue)}.setup-right{width:60%;padding-left:7%;padding-right:7%;min-height:10.5rem;display:flex;align-items:center;justify-content:center}.setup-split .setup-right{width:40%;padding:7%;min-height:20px;align-items:flex-start}.end-setup-section{display:flex;justify-content:center;align-items:center;align-self:center;padding:1%;width:50%;position:relative;top:10px}.no-mark-labels .MuiSlider-markLabel{display:none}#game-mode-info{width:50%}.game-mode-description{margin-top:0}#game-mode-title{margin-bottom:5px}@font-face{font-family:Orbitron;src:url(/assets/Orbitron-VariableFont_wght-CYB_IVAf.ttf) format("truetype");font-weight:200 800;font-style:normal italic;font-display:swap}#game-header{display:flex;flex-direction:row;justify-content:center;gap:50px;width:100%;margin-bottom:2%;height:calc(var(--square-size) * .75);align-items:center}#game-header h1{color:var(--emphasis-blue);font-weight:800;font-size:clamp(1.6rem,2.5vw,2.3rem);width:calc(var(--square-size) * 3.5);height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:2px;position:relative;text-shadow:1px 1px 0 hsl(230,29%,43%),2px 2px 0 hsl(230,29%,43%),3px 3px 0 hsl(230,29%,43%),4px 4px 0 hsl(230,29%,43%),5px 5px 0 hsl(230,29%,43%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:10px;border:2px var(--emphasis-blue) solid;-webkit-box-shadow:5px 5px 6px 5px #0000003b;box-shadow:5px 5px 6px 5px #0004}#scoreboard{font-family:Orbitron;height:100%;width:calc(var(--square-size) * 8);background-color:var(--primary-yellow);border-radius:15px;display:flex;flex-direction:row;justify-content:space-evenly;align-items:flex-start;-webkit-box-shadow:5px 5px 6px 5px #0000003b;box-shadow:5px 5px 6px 5px #0004;border:5px var(--primary-yellow) solid;position:relative}.scoreboard-heading{margin-bottom:clamp(.01rem,.11%,1rem);font-weight:800}h2.scoreboard-heading{margin-top:0;font-size:x-large}.scoreboard-element{color:#fff;height:80%;border-radius:15px;background-color:#000;text-shadow:0 0 5px rgb(222,249,249)}#timer-wrapper{width:25%;height:100%;display:flex;align-items:center}#timer{width:100%;font-size:clamp(2rem,2vw,2.5rem);display:flex;align-items:center;justify-content:center;border:4px black solid}#scores-wrapper{width:55%;height:100%}#scores{width:100%;height:100%;align-items:inherit;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center}.player-score{width:40%;display:flex;flex-direction:column;justify-content:center;position:relative;border:4px black solid}.player-score.active-player{border:4px var(--emphasis-blue) solid}.player-score-heading{margin-top:2px;font-size:clamp(.6rem,1.2vw,1.2rem);margin-bottom:-6px}.score-value-multiplayer{font-size:clamp(1rem,1.5vw,1.5rem)}.score-value-single{font-size:clamp(1.5rem,2.5vw,2.5rem);margin-top:2%}.score-btn{width:20%;height:100%;position:absolute;bottom:2%;color:#fff;background:none;font-size:2em;margin:0;padding:0;z-index:4}.score-btn.left{left:.5em}.score-btn.right{right:.5em}.turn-alert{position:absolute;display:none}.active-player .turn-alert{display:block;background-color:var(--emphasis-blue);width:50px;height:50px;border-radius:25px;font-size:1em;font-family:Atkinson Hyperlegible Next,sans-serif;font-weight:500;position:absolute;bottom:-2em;left:-20px;-webkit-box-shadow:2px 2px 5px 2px #0000007a;box-shadow:2px 2px 5px 2px #0000007a;padding:1px}#instructions-toggle{position:absolute;z-index:2;top:5px;right:5px}