:root{--max-word-container-width: 150px;--white-color: #fff;--warm-gray: #8c8377;--dark-red: #8b0000;--dark-red-deep: #600000;--black-color: #000;--bright-blue: #006f9f;--teal-green: #07a74e;--terra-red: #d35064;--golden-yellow: #fcc743;--margin-xs: 10px;--margin-s: 20px;--margin-m: 30px;--padding-xs: 10px;--padding-s: 20px;--padding-m: 30px;--border-radius-s: 10px;--font-size-s: 16px;--font-size-m: 18px;--font-size-l: 24px;--font-size-xl: 32px;--font-size-2xl: 40px;--font-size-3xl: 48px;--font-size-4xl: 64px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-heavy: 900}*{font-family:Source Code Pro,monospace;box-sizing:border-box}body{color:var(--black-color)}.main{padding:20px;height:100%}.container{margin:0 auto;max-width:1200px}.header{margin-bottom:var(--margin-s);font-size:var(--font-size-xl)}.header-wrapper{display:flex;justify-content:center;margin-bottom:var(--margin-m)}.chain-length-wrapper{display:flex;gap:var(--margin-s);flex-direction:column;margin-bottom:var(--margin-m)}.game{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(auto-fit,minmax(var(--max-word-container-width),1fr));column-gap:var(--margin-s);row-gap:var(--margin-s);margin-top:var(--margin-m)}.game--hidden{content-visibility:hidden}.chain-input-wrapper{display:flex;flex-direction:column;gap:var(--margin-s);margin-bottom:var(--margin-m)}.chain-input-label{font-size:var(--font-size-m)}.chain-input{min-height:50px;padding:0 var(--padding-s);border-radius:var(--border-radius-s);border:solid;border-color:var(--dark-red);font-size:var(--font-size-m)}.chain-input:focus{outline:none;box-shadow:0 0 5px var(--dark-red-deep)}.chain-preview-wrapper{justify-content:start;flex-wrap:wrap;margin-bottom:var(--margin-m)}.chain-preview-wrapper--visible{display:flex;row-gap:var(--margin-m)}.chain-preview-wrapper--hidden{display:none}.word-preview{display:flex;gap:var(--margin-xs);align-items:center;margin-right:var(--margin-xs);padding:var(--padding-xs);border-radius:var(--border-radius-s);border:solid;border-color:var(--dark-red);font-size:var(--font-size-m);word-break:break-all}.word-container{display:flex;flex-direction:column;justify-content:center;color:var(--white-color);font-size:var(--font-size-m);text-align:center;padding:var(--padding-s);border-radius:var(--border-radius-s);cursor:pointer;transition:transform .6s;word-break:break-all;overflow-wrap:break-word;text-overflow:ellipsis}.word-container--not-chained{background-color:var(--dark-red)}.word-container:hover{transform:scale(1.1);box-shadow:0 0 5px var(--dark-red-deep)}.rotate-word-container{animation:rotate-word-container .3s ease-in-out}.word-container--chained-m{background-color:var(--bright-blue)}.word-container--chained-f{background-color:var(--terra-red)}.word-container--chained-n{background-color:var(--teal-green)}.word-container--chained-p{background-color:var(--golden-yellow)}@keyframes rotate-word-container{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.set-length-button{flex:6;background-color:var(--dark-red);padding:var(--padding-xs) var(--padding-s);border:none;border-radius:var(--border-radius-s);color:var(--white-color);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);cursor:pointer}.set-length-button:hover:enabled{box-shadow:0 0 5px var(--dark-red-deep)}.chain-split-wrapper{display:flex;flex-direction:column;gap:var(--margin-s);margin-bottom:var(--margin-m)}.chain-split-label{font-size:var(--font-size-m)}.set-chain-split{display:flex;gap:var(--margin-s);flex-wrap:nowrap;justify-content:space-between}.label--radio{display:inline-flex;flex:1}.radio{position:absolute;width:0;height:0;opacity:0}.option{width:100%;text-align:center;border-radius:var(--border-radius-s);background-color:var(--dark-red);padding:var(--margin-xs);color:var(--white-color);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);cursor:pointer}.set-order-important{display:flex;padding:0;gap:var(--margin-s);justify-content:center;align-items:stretch}.radio-order{position:absolute;width:0;height:0;opacity:0}.word-order-wrapper{display:flex;flex-direction:column;gap:var(--margin-s);margin-bottom:var(--margin-m)}.word-order-fieldset{display:flex;flex-direction:column}.word-order-label{display:block;font-size:var(--font-size-m)}.add-chain-button:hover:enabled{box-shadow:0 0 5px var(--dark-red-deep)}.game-control-wrapper{display:flex;flex-wrap:wrap;gap:var(--margin-m)}.control-buttons-wrapper{flex:1;display:flex;gap:var(--margin-s)}.add-chain-button,.play-button,.reset-button,.save-template-button,.choose-template-button{flex:1;background-color:var(--dark-red);padding:var(--padding-xs) var(--padding-s);border-radius:var(--border-radius-s);border:none;color:var(--white-color);font-weight:var(--font-weight-bold);cursor:pointer;font-size:var(--font-size-m)}.reset-button:hover:enabled,.play-button:hover:enabled,.save-template-button:hover:enabled,.delete-template-button:hover:enabled,.load-template-button:hover:enabled,.choose-template-button:hover:enabled,.radio:checked:enabled~.option,.radio-order:checked:enabled~.option,.option:hover:enabled{box-shadow:0 0 5px var(--dark-red-deep)}.play-button:disabled,.set-length-button:disabled,.reset-button:disabled,.add-chain-button:disabled,.radio-order:disabled~.option,.load-template-button:disabled,.save-template-button:disabled,.choose-template-button:disabled,.radio:disabled~.option{background-color:var(--warm-gray);cursor:not-allowed}.chain-length-input:disabled,.chain-input:disabled{cursor:not-allowed}.chain-length-label{display:block;font-size:var(--font-size-m)}.chain-length-input{height:100%;flex:1;text-align:center;padding:var(--padding-xs);border-radius:var(--border-radius-s);border:solid;border-color:var(--dark-red);font-weight:var(--font-weight-regular);font-size:var(--font-size-m);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.chain-length-input::-webkit-inner-spin-button,.chain-length-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.chain-length-input:focus{outline:none;box-shadow:0 0 5px var(--dark-red-deep)}.chain-length-input-wrapper{display:flex;gap:var(--margin-m);justify-content:center;align-items:stretch}.word-preview:hover{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.cross-icon{cursor:pointer}.game-score-wrapper{display:flex;justify-content:center;align-items:end;margin:var(--margin-m) 0;gap:var(--margin-s)}.game-score-wrapper--hidden{visibility:hidden}.game-score,.game-score-label{font-size:var(--font-size-2xl)}.dialog{justify-content:center;flex-direction:column;min-width:30vw;min-height:30vh;max-width:80vw;max-height:80vh;border:none;padding:var(--padding-xs) var(--padding-s);border-radius:var(--border-radius-s)}.dialog[open]::backdrop{background-image:linear-gradient(to bottom,#00000080,#0003)}.dialog[open]{display:flex;opacity:1;transform:scaleY(1)}.dialog__header{display:flex;justify-content:center;font-size:var(--font-size-m)}.dialog__template-name{font-size:var(--font-size-m);font-weight:var(--font-weight-medium)}.dialog__templates-wrapper{display:flex;flex-direction:column;gap:var(--margin-s)}.dialog__template-wrapper{display:flex;gap:var(--margin-m);align-items:center;justify-content:space-between}.dialog__btn-wrapper{display:flex;gap:var(--margin-s)}.dialog__btn-wrapper--control{margin:var(--margin-s) 0}.delete-template-button{padding:0 var(--margin-s);background-color:var(--white-color);border-radius:var(--border-radius-s);border-color:var(--dark-red);border:solid;color:var(--dark-red);font-weight:var(--font-weight-medium);cursor:pointer;font-size:var(--font-size-s)}.dialog__template-btn{display:flex;gap:var(--margin-xs)}.load-template-button{padding:var(--margin-xs) var(--margin-s);background-color:var(--dark-red);border-radius:var(--border-radius-s);border:none;color:var(--white-color);font-weight:var(--font-weight-medium);cursor:pointer;font-size:var(--font-size-s)}.dialog__input-label{display:block;margin-bottom:var(--margin-s);font-size:var(--font-size-m)}.dialog__input{min-height:50px;margin-bottom:var(--margin-s);border-radius:var(--border-radius-s);border:solid;font-size:var(--font-size-m)}.dialog__save-template-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}.dialog__save-button{flex:1;padding:var(--margin-xs);background-color:var(--dark-red);border-radius:var(--border-radius-s);border:none;color:var(--white-color);font-weight:var(--font-weight-medium);cursor:pointer;font-size:var(--font-size-s)}.dialog__cancel-button{flex:1;background-color:var(--white-color);border-radius:var(--border-radius-s);border-color:var(--dark-red);border:solid;color:var(--dark-red);font-weight:var(--font-weight-medium);cursor:pointer;font-size:var(--font-size-s)}@media (max-width: 375px){:root{--max-word-container-width: 100px}}