/* Josh Comeau's CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after {box-sizing: border-box;} * {margin: 0;} body {font-size:16px; line-height: 1.5;-webkit-font-smoothing: antialiased;} img, picture, video, canvas, svg {display: block;max-width: 100%;} input, button, textarea, select {font: inherit;} p, h1, puzzle, h3, h4, h5, h6 {overflow-wrap: break-word;} #root, #__next {isolation: isolate;} /* Entropy Styles */ html {background:#000;} body {position:relative; height:100vh; border-bottom:5vh solid #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:#000;} body::before {content:''; display:block; position:fixed; bottom:0; left:0; width:100%; height:25vw; background:#000; z-index:-1;} #root {position:relative; width:100vw; min-height:100vh; z-index:100; overflow-x:hidden; background:radial-gradient(circle at top, indigo 25%, black 100%)} header {position:relative; height:auto; background:transparent;} h1 {position:relative; margin:0; padding:2vh 0 0; text-align:center; font-family:'biorhyme-variable'; font-size:6.5vw; line-height:1; font-weight:700;} /*h1::before {content:''; display:block; width:100vw; height:5vh; background:linear-gradient(indigo,transparent);} h1::after {content:'A "simple substitution cypher" game'; display:block; padding:2vh 0 0; font:bold 3vw/1 "Helvetica","Arial", sans-serif; text-transform:uppercase; color:#fff; opacity:0; transition:all 0.2s ease-in-out;}*/ h1.loaded::after {opacity:1;} h1 span {position:relative; top:2vh; display: inline-block; padding:0; margin-right: 3px; width:12.5vw; height:12.5vw; line-height:12.5vw; text-transform:uppercase; color:#000; background:#000; border-radius:8px; border:2.5px solid #fff; box-shadow:0 2px 2px 0 rgba(0,0,0.5); transition:all 0.2s cubic-bezier(0.34, 2, 0.64, 1);} h1 span::before {position:absolute; content:attr(data-text); color:#fff; transform:scaleX(0.85);} h1 span:last-child {margin:0;} #action-buttons { display: flex; margin:4vw 2vw 0; justify-content: space-between; align-items: center; opacity:0; transition:opacity 0.2s ease-in-out; column-gap:6px; } #action-buttons button { flex: 1; /* Make buttons grow to fill available space */ overflow:hidden; white-space:nowrap; border-radius:8px; border:2px solid rgba(255,255,255,0.67); background:linear-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.67)); color:#fff; text-transform:uppercase; font-size:3vw; line-height:1.33; font-weight:bold; padding:0.33rem 0; box-shadow:0 0 0 2px rgba(0,0,0,0.5); height:12.5vw; margin:0 !important; } #action-buttons button span {display:inline-block;} i.entropy-hamburger {position:relative; top:-1px; left:-1.5vw; display:inline-block; width:1.25em; height:2px; vertical-align:middle; background-color:#fff;} i.entropy-hamburger::before, i.entropy-hamburger::after {content:""; position:absolute; left:0; display:block; width:100%; height:100%; background-color:#fff;} i.entropy-hamburger::before {top:-5px;} i.entropy-hamburger::after {top:5px;} span.entropy-font {font-family:'courier-std'; font-weight:800;} entropy-puzzle {position:relative; display:block; padding:3vh 0; text-align:center; font-family:'courier-std'; font-weight:400; line-height:1; overflow-x:scroll;} entropy-puzzle::-webkit-scrollbar {display:none;} entropy-puzzle {-ms-overflow-style:none; scrollbar-width:none;} entropy-puzzle h2 {display:none;} puzzle-line {display:block; margin:0.25rem 0 0.5rem; font-weight:normal} puzzle-word {display:inline-block ;margin:0.25rem 2.25vw; white-space:nowrap;} puzzle-tile {position:relative; display: inline-block; margin:0 3px 3px; text-transform: uppercase; background: linear-gradient(#fff,#ddd); cursor: pointer; border-radius: 5px; border: 1px solid #333; box-shadow: 0 0 0 2px #fff; opacity:0; transition:opacity 0.2s ease-in-out, top 0.5s cubic-bezier(0.34, 2, 0.64, 1); color:#000; width:9vw; height:9vw; line-height:8vw; font-size:5.5vw; font-weight:700; text-align:center;} puzzle-tile::before {content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:5px; background:rgba(0,0,0,0.05); z-index:-1;} body:not(.animating) puzzle-tile.active {opacity:1 !important;} body:not(.animating) puzzle-tile.active, body:not(.animating) puzzle-tile.active.changed {color:#fff; background:linear-gradient(#4b0082,#4b0082); border-color:transparent;} puzzle-tile.changed {color:#000; background:linear-gradient(#fff,#fff); border:1px solid #000; box-shadow:0 0 0 2px #fff; opacity:1 !important} puzzle-tile.active::after {background:#fff; opacity:0.3;} puzzle-tile.changed::after {opacity:0;} puzzle-tile.alert {color:#fff; background:linear-gradient(#FB3640,#FB3640) !important;} puzzle-tile.winner {top:-7px; color:#fff; background:indigo; transition:all 0.2s ease-in-out;} puzzle-tile.winner.final, body[data-result="winner"] puzzle-tile {top:0; border:2px solid #fff; color:#000; box-shadow:0 0 0 2px #000, 0 0 20px rgba(255,255,255,0.5); background:#fff; line-height:calc(8vw - 2px);} puzzle-tile.winner::after, body[data-result="winner"] puzzle-tile::after {display:none;} puzzle-tile.changed::before, puzzle-tile.winner::before, body[data-result="winner"] puzzle-tile::before {opacity:0;} body[data-result="winner"] puzzle-tile {opacity:1 !important; pointer-events:none;} puzzle-tile.hint {opacity:1 !important; background:#fff; box-shadow:0 0 0 2px #FFBA49; pointer-events:none;} puzzle-tile.animate {animation: spin-once 0.5s ease-in-out forwards;} puzzle-tile.fix {box-shadow:0 0 0 2px #FB3640;} puzzle-tile.changed.fix {opacity:1 !important; background:#fff; box-shadow:0 0 0 2px #FB3640; color:#a00;} body.wiggle-tiles puzzle-tile {animation: wiggle 0.25s infinite linear;} body.wiggle-tiles #KioskBoard-VirtualKeyboard {display:none !important;} body[data-difficulty-level="2"] entropy-puzzle puzzle-tile.punctuation {display:none !important;} body[data-difficulty-level="3"] entropy-puzzle, body[data-difficulty-level="4"] entropy-puzzle {padding:3vw; text-align:left;} body[data-difficulty-level="3"] puzzle-tile.punctuation, body[data-difficulty-level="4"] puzzle-tile.punctuation {display:none !important;} body[data-difficulty-level="3"] puzzle-tile.letter, body[data-difficulty-level="3"] puzzle-tile.number, body[data-difficulty-level="4"] puzzle-tile.letter, body[data-difficulty-level="4"] puzzle-tile.number {margin:3px 3px 4px !important; width:calc(13vw - 17px); height:calc(13vw - 17px); text-align:center;} body[data-difficulty-level="3"] puzzle-word.word, body[data-difficulty-level="3"] puzzle-line, body[data-difficulty-level="4"] puzzle-word.word, body[data-difficulty-level="4"] puzzle-line {margin:0 !important; display:inline !important; white-space:normal !important;} #auxiliary {position:fixed; top:0; left:-100vw; padding:1rem; width:100%; height:100%; color:#fff; background:linear-gradient(rgba(0,0,0,0.80),rgba(0,0,0,0.95)); z-index:1000; overflow-y:scroll; opacity:0; pointer-events:none; transition:opacity 0.2s ease-in-out;} #auxiliary > div {position:relative; left:-200vw; height:0; max-height:calc(100vh - 250px); overflow-y:scroll;} #auxiliary h2 {position:relative; transform:translateY(1em); padding:0 0 1rem; font-size:2rem; font-weight:bold; line-height:1; opacity:0; transition:opacity 0.2s 0.2s ease-in-out, transform 0.2s 0.2s ease-in-out; will-change: opacity, transform;} #auxiliary h3 {position:relative; transform:translateY(0.5em); padding:0 0 1rem; font-size:1.15rem; font-weight:bold; line-height:1; text-transform:uppercase; opacity:0; transition:opacity 0.2s 0.3s ease-in-out, transform 0.2s 0.3s ease-in-out; will-change: opacity, transform;} #auxiliary p {position:relative; transform:translateY(0.5em); padding:0 0 1rem; opacity:0; transition:opacity 0.2s 0.4s ease-in-out, transform 0.2s 0.4s ease-in-out; will-change: opacity, transform;} #privacy ol, #privacy ul {transform:translateY(0.5em); opacity:0; padding:0 0 0.5rem 1rem;} #privacy ol li, #privacy ul li {padding-bottom:0.5rem;} #auxiliary p + p {transition:opacity 0.2s 0.5s ease-in-out, transform 0.2s 0.5s ease-in-out; will-change: opacity, transform;} #auxiliary p + p + p {transition:opacity 0.2s 0.6s ease-in-out, transform 0.2s 0.6s ease-in-out; will-change: opacity, transform;} #auxiliary ol, #auxiliary ul {transition:opacity 0.2s 0.6s ease-in-out, transform 0.2s 0.6s ease-in-out; will-change: opacity, transform;} #auxiliary a {display:inline-block; color:#FFBA49; text-decoration:none; font-weight:500; border-bottom:1px solid #FFBA49; transition:border 0.2s ease-in-out;} #hints-upsell {display:none; position:relative; transform:translateY(0.5em); margin:0 0 5vw; padding:1rem; border:2px solid #FFBA49; border-radius:8px; background:linear-gradient(#111,#000); opacity:0; transition:opacity 0.2s 0.4s ease-in-out, transform 0.2s 0.4s ease-in-out; will-change: opacity, transform;} #hints-upsell h3 {text-align:center; color:#FFBA49;} #hints-3-pack {margin:1rem 0 2rem; width:100%; border:2px solid #fff; border-radius:100px; background:#000; color:#fff; text-transform:uppercase; font-size:0.8rem; line-height:3; font-weight:600; } #hints-upsell h4 {text-align:center;} #hints-upsell ul {padding:0.5rem 0 0 1rem;} #join-codebreakers {margin:1rem 0; width:100%; border:2px solid #000; border-radius:100px; background:#FFBA49; color:#000; box-shadow:0 0 0 2px #FFBA49; text-transform:uppercase; font-size:1rem; line-height:2.5; font-weight:600; } #auxiliary div.accordion {position:relative; opacity:0; /*transform:translateY(0.5rem);*/ transition:opacity 0.2s 0.5s ease-in-out, transform 0.2s 0.5s ease-in-out; will-change: opacity, transform;} #auxiliary div.accordion h3.accordion-title {padding:0; font-size:1rem; line-height:3; border-top:1px solid rgba(255,255,255,0.4); transition:none;} #auxiliary div.accordion h3.accordion-title > span {display:inline-block;} #auxiliary div.accordion h3.accordion-title:first-child {border-top:1px solid rgba(255,255,255,0.4);} #auxiliary div.accordion h3.accordion-title + div.accordion-content {height:0; opacity:0; overflow:hidden; transition:opacity 0.2s ease-in-out;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content {height:auto; opacity:1; overflow:auto;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content h4 {padding:1rem 0 0.5rem} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content p {transition:none;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content p:first-child {padding-top:1rem;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content p:last-child {padding-bottom:2rem;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content form {position:relative; margin:0 0 1rem;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content form::after {content:"\25BC"; position:absolute; top:2px; right:2px; display:block; width:50px; height:36px; text-align:center; line-height:36px; border-top-right-radius:100px; border-bottom-right-radius:100px; border-left:2px solid #fff; color:#fff; background:#FFBA49; pointer-events:none;} #auxiliary div.accordion h3.accordion-title.active + div.accordion-content form select {padding:0 0 1px 20px; width:100%; height:2.5rem; font-size:14px; font-weight:500; border-radius:100px; border:2px solid #fff; background:transparent; color:#fff; text-transform:uppercase; outline:none;} #auxiliary div.hint {position:relative; transform:translateY(0.5rem); margin:0 0 1.5rem; padding:1.5rem; text-align:center; border:2px solid rgba(255,255,255,0.33); border-radius:16px; background:rgba(0,0,0,0.33); opacity:0; transition:opacity 0.2s 0.5s ease-in-out, transform 0.2s 0.5s ease-in-out; will-change: opacity, transform;} #auxiliary div.hint.stage-1 {margin-top:1rem;} #auxiliary div.hint i.entropy-lock {position:absolute; top:3rem; left:calc(50% - 1rem); display:block; padding:0.33rem; width:1.5rem; height:auto; border:2px solid rgba(255,186,73,0.5); border-radius:100px; background:#000; z-index:10;} #auxiliary div.hint svg {width:100%; height:auto; opacity:0.75;} #auxiliary div.hint h3 {margin:0 0 1.25rem; padding:0 0 1.25rem; font-size:1rem; color:#FFBA49; border-bottom:2px solid rgba(255,186,73,0.5);} #auxiliary div.hint p {padding-bottom:0; font-size:0.9rem;} #auxiliary div.hint a {display:inline-block; color:#7BD389; text-decoration:none; border-bottom:1px solid #7BD389; transition:border 0.2s ease-in-out;} #hints-tier-1 ul {list-style:none; padding:1rem 0;} #hints-tier-1 ul li {margin:0 0 1rem; padding:0; display:block; text-align:center;} /*#hints-tier-1 ul li button {position:relative; padding:0; width:85vw; border-radius:100px; border:2px solid #000; background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.4)); color:#fff; text-transform:uppercase; font-size:3.33vw; line-height:3; font-weight:600; box-shadow:0 0 0 2px #fff; text-shadow: 1px 0 rgba(0, 0, 0, 0.5), -1px 0 rgba(0, 0, 0, 0.5), 0 1px rgba(0, 0, 0, 0.5), 0 -1px rgba(0, 0, 0, 0.5), 1px 1px rgba(0, 0, 0, 0.5), -1px -1px rgba(0, 0, 0, 0.5), 1px -1px rgba(0, 0, 0, 0.5), -1px 1px rgba(0, 0, 0, 0.5); } #hints-tier-1 ul li button::before {content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(35,206,107,1); border-radius:100px; z-index:-1;} */ #hints-tier-1 ul li button {position:relative; padding:0; width:85vw; border-radius:100px; border:3px solid #7BD389; background:transparent; color:#fff; text-transform:uppercase; font-size:3.33vw; line-height:3; font-weight:600;} #auxiliary div.accordion #hints-tier-2 h4 {margin:1.5rem 0.5rem; padding:0.33rem 1rem; display:block; font-size:0.75rem; border:2px solid #000; border-radius:8px; box-shadow:0 0 0 2px rgba(35,206,107,1); background:rgba(35,206,107,1); color:#000; text-align:center;} #hints-tier-3 a {color:rgba(35,206,107,1); border-color:rgba(35,206,107,1);} #news-item {margin:1rem 0.5rem 3rem; padding:1rem; border:2px solid #000; border-radius:8px; box-shadow:0 0 0 2px rgba(35,206,107,1); background:linear-gradient(#252525,#111);} #news-item a {color:#fff; border:0;} #news-item a.button-link {display:inline-block; padding:0.33rem 1rem; font-size:0.75rem; border:2px solid #000; border-radius:8px; box-shadow:0 0 0 2px rgba(35,206,107,1); background:rgba(35,206,107,1); color:#000;} #news-item p {padding:0.5rem 0 1rem; text-align:center;} #news-item img {border-radius:10px;} #news-item h4 {font-weight:500;} #news-item h5 {text-align:center;} div.hint-example-container {position:absolute; top:50px; font-family:'courier-std'; font-weight:400; line-height:1;} div.hint-example-container div.line {display:block; margin:0.25rem 0 0.5rem; font-weight:normal} div.hint-example-container span.word {display:inline-block ;margin:0.25rem 0.5rem; white-space:nowrap;} div.hint-example-container span.letter {position:relative; display: inline-block; margin:3px; text-transform: uppercase; background: linear-gradient(#fff,#ddd); cursor: pointer; border-radius: 2.5px; border: 1px solid #333; box-shadow: 0 0 0 2px #fff; opacity:0.85; transition:opacity 0.2s ease-in-out, top 0.5s cubic-bezier(0.34, 2, 0.64, 1); color:#000; width:1.5rem; height:1.5rem; line-height:1.3; font-size:1rem; font-weight:700; text-align:center;} div.hint-example-container span.letter::before {content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:5px; background:rgba(0,0,0,0.00); z-index:-1;} div.hint-example-container span.letter.active {opacity:1 !important;} div.hint-example-container span.letter.active, div.hint-example-container span.letter.active.changed {color:#fff; background:linear-gradient(#4b0082,#4b0082); border-color:transparent;} div.hint-example-container span.letter.changed {color:#000; background:linear-gradient(#fff,#fff); border:1px solid #000; box-shadow:0 0 0 2px #fff; opacity:1 !important} div.hint-example-container span.letter.active::after {background:#fff; opacity:0.3;} div.hint-example-container span.letter.changed::after {opacity:0;} div.hint-example-container span.letter.alert {color:#fff; background:linear-gradient(#FB3640,#FB3640) !important;} div.hint-example-container span.letter.winner {top:-7px; color:#fff; background:indigo; transition:all 0.2s ease-in-out;} div.hint-example-container span.letter.winner.final {top:0; border:2px solid #fff; color:#000; box-shadow:0 0 0 1px #000, 0 0 20px rgba(255,255,255,0.75); background:#fff; line-height:1.2;} div.hint-example-container span.letter.winner::after {display:none;} div.hint-example-container span.letter.changed::before, div.hint-example-container span.letter.winner::before {opacity:0;} div.hint-example-container span.letter.hint {opacity:1 !important; background:#fff8ec; box-shadow:0 0 0 2px #FFBA49; pointer-events:none;} div.hint-example-container span.letter.animate {animation: spin-once 0.5s ease-in-out forwards;} div.hint-example-container span.letter.fix {box-shadow:0 0 0 2px #FB3640;} div.hint-example-container span.letter.changed.fix {opacity:1 !important; background:#fff; box-shadow:0 0 0 2px #FB3640; color:#a00;} #previous-puzzles-table {margin-bottom:2rem;} #previous-puzzles-table th {padding:0.5rem 0.33rem; color:#FFBA49; text-align:left; font-weight:bold; font-size:0.75rem; text-transform:uppercase;} #previous-puzzles-table th + th + th {text-align:right;} #previous-puzzles-table td {padding:0.5rem 0.33rem; border-top:1px solid rgba(255,186,73,0.33); font-size:0.9rem; line-height:1.2;} #previous-puzzles-table td + td + td {text-align:right;} #auxiliary > div#contains-close-button {left:auto; padding:1rem 0 0; height:auto; overflow-y:auto; border-top:1px solid rgba(255,255,255,0.4); text-align:center;} #close-button {display:inline-block; padding:0.75rem 3rem; font-size:0.85rem; text-transform:uppercase; color:#fff; border:2px solid #444; border-radius:8px; background:#000;} #mobile_keyboard_trigger {position:fixed; top:0; left:-200vh;} #difficulty_range {width:100%;} #options-settings {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: 90vw; position:relative; margin:5vh 5vw 0; padding:5vh 0; border-top:1px solid #fff; text-align:center;} #options-settings button.btn {display:flex; align-items:center; justify-content:center; position:relative; margin:0; padding:12px; width:auto; font-family:Arial, Helvetica, sans-serif; line-height:1rem; text-align:center; color:#000; border:0; border-radius:5px; background:linear-gradient(#f5f5f5,#c5c5c5);} #options-settings button.btn i {position:relative; top:1px; display:inline-block; font-style:normal;} #options-settings button.btn span {display:inline-block; margin-left:5px; text-transform:uppercase; font-weight:bold; font-size:0.75rem;} #difficulty-settings {padding:0; width:100vw; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.75rem; color:#000; transition:opacity 0.2s ease-in-out;} #difficulty-settings ol {margin:0 1rem; padding:0; list-style:none; background:rgba(255,255,255,0.875); border:2px solid rgba(255,255,255,0.95); border-radius:25px;} #difficulty-settings ol li {position:relative; text-transform:none;} #difficulty-settings ol li input {position:absolute; left:-10000em;} #difficulty-settings ol li input + label {display:block; padding:1rem; text-align:center; border-bottom:1px solid #ccc; border-radius:0; opacity:0.80; transition:opacity 0.2s ease-in-out;} #difficulty-settings ol li:first-child input + label {border-top-right-radius:25px; border-top-left-radius:25px;} #difficulty-settings ol li:last-child input + label {border-bottom-right-radius:25px; border-bottom-left-radius:25px; border-bottom:0;} #difficulty-settings ol li input + label h3 {padding:0 0 0.5rem; text-align:center; font:bold 1rem/1.25 "Helvetica","Arial", sans-serif; text-transform:uppercase; color:#000;} #difficulty-settings ol li input + label h3 i {display:block; font-size:2rem; font-style:normal; font-weight:normal;} #difficulty-settings ol li input + label::after {content:''; display:block; width:100%; height:0; clear:both;} #difficulty-settings ol li input:checked + label {opacity:1; background:#fff;} #game-stats {position:relative;} #auxiliary div.accordion h3.accordion-title.active + #game-stats.accordion-content {padding:1rem 0;} #game-stats h3 {margin:0 0 0.5rem; padding:1.75rem 0 1rem; border-bottom:1px solid #444;} #game-stats h3 i {position:relative; top:1px; margin-right:5px; font-size:1.25rem; line-height:1; font-style:normal; font-weight:normal;} #game-stats h4 {padding:1rem 0; font-size:0.9rem; line-height:1.1rem; text-align:center; text-transform:uppercase;} #game-stats h4 i {position:relative; top:1px; margin-right:5px; font-size:1.1rem; line-height:1.1rem; font-style:normal; font-weight:normal;} #game-stats h5 {padding:1rem 0 0; font-size:2.75vw; line-height:1; text-transform:uppercase; font-weight:900;} #game-stats h5 + span {display:block; padding:0.75rem 0 1rem; font-size:5vw; line-height:1; font-weight:500;} #game-stats ul {margin:0; padding:2.5vw 0 5vw; list-style:none; text-align:center;} #game-stats ul li {display:inline-block; margin-left:5px; width:calc(33% - 10px); height:auto; border-radius:8px; background:#2e2e2e; box-shadow:0 4px 4px 0 rgba(0,0,0,0.51);} #game-stats ul li:first-child {margin-left:0;} #player-today {display:none;} #player-today h3.logo {padding-bottom:1rem; border:0;} #player-today h3.logo i {margin:0; font-size:2.5rem;} #player-today h3.logo + p {padding:0 0.5rem 1rem;} #player-today h5 {font-size:0.7rem; color:#FFBA49;} #player-today h5 i {display:block; padding:0 0 0.75rem; font-size:1.25rem; line-height:1.25rem; font-style:normal; font-weight:normal; text-align:center;} #player-today h5 i svg {display:block; margin:0 auto; width:1.33rem; height:auto; color:#FFBA49;} #player-today span {font-size:1.2rem;} #player-today p > span {font-size:1rem;} #player-today.show {display:block;} #player-today.show + h3 {margin-top:1rem; border-top:1px solid #444;} #player-today ul li {border:2px solid #FFBA49; border-radius:12px;} #player-today ul.contains-cheer {position:relative; margin-bottom:2.5rem;} #player-today ul li.cheer {position:relative;} #player-today ul li.cheer::after {content:""; position:absolute; bottom:calc(-1.75rem - 10px); left:0; width:100%; display:inline-block; border-radius:5px; font-size:0.7rem; line-height:1.75rem; font-weight:bolder; text-transform:uppercase; color:#000; background:#FFD046;} #player-today ul li.cheer#player-today-score::after {content:"High Score!";} #player-today ul li.cheer#player-today-moves::after {content:"Perfect Game!";} #player-today ul li.cheer#player-today-timer::after {content:"Fastest Time!";} #player-today ul.first-solve li.cheer#player-today-timer::after {content:"First Today!";} #player-today button {display:block; margin:1rem auto 3rem; padding:0.75rem 3rem; font-size:0.85rem; text-transform:uppercase; color:#000; font-weight:600; border:2px solid #000; border-radius:100px; background:#FFBA49; box-shadow:0 0 0 2px #FFBA49;} html body[data-auxiliary] #auxiliary #options ul {margin:0; padding:0.75rem 0; list-style:none; text-align:left;} html body[data-auxiliary] #auxiliary #options ul li {position:relative; margin:0 0 0.67rem; padding:0.75rem 0 0; border-top:1px solid rgba(35,206,107,0.33);} html body[data-auxiliary] #auxiliary #options ul li:first-child {border-top:0;} html body[data-auxiliary] #auxiliary #options ul li input {position:absolute; left:-10000em;} html body[data-auxiliary] #auxiliary #options ul li label {display:block; position:relative; padding-left:3.5rem; font-size:1rem; font-weight:500;} html body[data-auxiliary] #auxiliary #options ul li input + label::before {content:""; position:absolute; top:3px; left:0; width:2.75rem; height:1.25rem; border-radius:3rem; border:2px solid #666; background:#5a5a5a; transition:background 0.2s ease-in-out;} html body[data-auxiliary] #auxiliary #options ul li input + label::after {content:""; position:absolute; top:1.5px; left:0; width:1.5rem; height:1.5rem; border:1px solid #444; border-radius:3rem; background:#ccc; transition:left 0.2s ease-in-out;} html body[data-auxiliary] #auxiliary #options ul li input:checked + label::before {background:rgba(75, 0, 130, 1);} html body[data-auxiliary] #auxiliary #options ul li input:checked + label::after {left:1.25rem;} html body[data-auxiliary] #auxiliary #options ul li p {padding:0.25rem 0 0 3.5rem; font-size: 0.8rem; color:#dfdfdf;} html body[data-auxiliary] #auxiliary #options ul li label h3 i {display:none;} html body[data-auxiliary] #auxiliary #options ul.difficulty li input + label::after {content:"🥳"; position:absolute; top:-5px; left:0; width:1.5rem; height:1.5rem; border:0; border-radius:0; background:transparent; font-size:6vw; filter:saturate(0); transition:left 0.2s ease-in-out;} html body[data-auxiliary] #auxiliary #options ul.difficulty li input[value="2"] + label::after {content:"😎";} html body[data-auxiliary] #auxiliary #options ul.difficulty li input[value="3"] + label::after {content:"🤔";} html body[data-auxiliary] #auxiliary #options ul.difficulty li input[value="4"] + label::after {content:"🤡";} html body[data-auxiliary] #auxiliary #options ul.difficulty li input:checked +label::after {left:1.25rem; filter:saturate(1);} html body[data-auxiliary] #auxiliary #welcome div.hint-example-container {position:relative; top:auto; text-align:center; padding-bottom:2rem;} html body[data-auxiliary] #auxiliary #welcome div.hint-example-container span.letter {margin:4px 3px; pointer-events:none;} html body[data-auxiliary] #auxiliary #welcome div.hint-example-container span.letter.show-original::before { content: attr(data-original); color:#000 !important; z-index:1; opacity:1; } html body[data-auxiliary] #auxiliary #welcome div.hint-example-container span.letter.show-original { color: transparent; /* hide original text content */ position: relative; } .welcome-tips + .welcome-tips {display:none;} .welcome-tips ol {padding-bottom:0.5rem;} .welcome-tips ol li {padding-bottom:0.5rem; line-height:1.3;} html body[data-auxiliary] #auxiliary #welcome p.contains-next-tip-button {padding-bottom:2rem; text-align:center; transition:opacity 0.2s 0.6s ease-in-out;} html body[data-auxiliary] #auxiliary #welcome p.contains-next-tip-button > a {display:inline-block; padding:1px 1rem; color:#000 !important; background:#FFBA49; border-radius:5px; border:1px solid #000 !important; box-shadow:0 0 0 2px #FFBA49;} #auxiliary #reset-board button {position:relative; margin:1rem auto; padding:0; width:100%; max-width:350px; display:block; text-align:center; border-radius:100px; box-shadow:0 0 0 2px #FB3640; border:2px solid #000; background:#FB3640;} #auxiliary #reset-board button span {display:inline-block; padding:0; color:#fff; text-transform:uppercase; font-size:3.33vw; line-height:3; font-weight:700; transition:padding 0.2s ease-in-out;} #privacy-policy {padding:1rem; height:50vh; overflow-y:scroll; border:1px solid #666;} footer {position:relative; margin:0 1rem; padding:0.75rem 0 0; border-top:2px solid rgba(255,255,255,0.4);} footer p {padding:0 0 0.75rem; font-size:0.75rem; text-align:center; color:#fff;} footer a {display:inline-block; color:#FFBA49; text-decoration:none; font-weight:500; border-bottom:1px solid #FFBA49; transition:border 0.2s ease-in-out;} div.background {position:fixed; right:0; top:0; width:100vw; height:100vh; overflow:hidden; z-index:1;} html body[data-keyboard="show"] #KioskBoard-VirtualKeyboard { height:200px; padding:12px 0 0; overflow:hidden; opacity:1; pointer-events:all; } html body[data-keyboard="show"] #KioskBoard-VirtualKeyboard * {pointer-events:all;} html body[data-keyboard="hide"] #KioskBoard-VirtualKeyboard, html body[data-auxiliary] #KioskBoard-VirtualKeyboard { height:180px; opacity:0; pointer-events:none; } html body[data-keyboard="hide"] #KioskBoard-VirtualKeyboard *, html body[data-auxiliary] #KioskBoard-VirtualKeyboard * {pointer-events:none;} html body[data-auxiliary] {overflow:hidden;} html body[data-auxiliary] #root {background:#000;} html body[data-auxiliary] header, html body[data-auxiliary] entropy-puzzle {filter:blur(5px);} html body[data-auxiliary="hints"] #hints {left:auto; height:auto;} html body[data-auxiliary="games"] #games {left:auto; height:auto;} html body[data-auxiliary="options"] #options {left:auto; height:auto;} html body[data-auxiliary="privacy"] #privacy {left:auto; height:auto;} html body[data-auxiliary="reset"] #reset-board {left:auto; height:auto;} html body[data-auxiliary="welcome"] #welcome {left:auto; height:auto;} html body[data-auxiliary] #auxiliary {left:0; opacity:1; pointer-events:all;} html body[data-auxiliary] #auxiliary h2, html body[data-auxiliary] #auxiliary h3, html body[data-auxiliary] #auxiliary p, html body[data-auxiliary] #auxiliary ol, html body[data-auxiliary] #auxiliary ul, html body[data-auxiliary] #auxiliary div.hint, html body[data-auxiliary] #auxiliary #hints-upsell {transform:translateY(0); opacity:1;} html body[data-auxiliary] #auxiliary div.accordion {opacity:1;} body.pref-always-show-keyboard #KioskBoard-VirtualKeyboard {opacity:1 !important; height:200px !important;} html body[data-auxiliary].pref-always-show-keyboard #KioskBoard-VirtualKeyboard {opacity:0 !important; height:180px !important;} html body[data-keyboard="winner"] #KioskBoard-VirtualKeyboard, html body[data-keyboard="winner"].pref-always-show-keyboard #KioskBoard-VirtualKeyboard {opacity:0 !important; height:0 !important;} html body[data-keyboard="winner"] #reset-button {pointer-events:none;} .spin-once {animation: spin-once 0.67s ease-in-out forwards;} .pulse-once {animation: pulse-once 0.67s ease-in-out forwards;} .set-a-letter {animation: set-letter 0.33s ease-in-out forwards;} body.screenshot header {padding-top:3vh;} body.screenshot h1 span {transition:none; top:0;} body.screenshot puzzle-tile.letter {opacity:0.825;} body.screenshot puzzle-tile.punctuation {opacity:1;} body.screenshot #KioskBoard-VirtualKeyboard {display:none !important;} body.screenshot #action-buttons {display:none;} @keyframes wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes spin { 0% { transform: rotate(-10deg); } 100% { transform: rotate(365deg); } } @keyframes spin-once { from { transform: rotate(-12deg); } to { transform: rotate(360deg); } } @keyframes pulse-once { 0% {transform:scale(0.67);} 33% {transform:scale(1.33);} 67% {transform:scale(1);} } @keyframes set-letter { 0% {transform:scale(0.90);} 33% {transform:scale(1.10);} 67% {transform:scale(1);} } @media only screen and (min-width:600px) { header {margin:0 auto; width:600px;} header h1 {padding-top:2rem; font-size:2.5rem;} header h1 span {width:4.75rem; height:4.75rem; line-height:4.75rem; margin-right: 4px; border-radius:0.67rem; border:3px solid #fff;} #action-buttons {margin:1rem 25px 0 !important; column-gap:9px;} #action-buttons button {font-size:0.8rem; height:3.3rem;} i.entropy-hamburger {top:-2px; left:-0.75rem; width:1em;} entropy-puzzle {margin:0 auto; padding:2rem 0; width:100%; max-width:1024px;} puzzle-word {margin:0.33rem 1rem;} puzzle-tile {width:3.25rem; height:3.25rem; line-height:1.5; font-size:2rem; border-radius:7px;} puzzle-tile::before {border-radius:7px;} puzzle-tile.winner.final {line-height:calc(3rem - 2px);} body[data-difficulty-level="2"] entropy-puzzle puzzle-tile.punctuation {display:none !important;} body[data-difficulty-level="3"] entropy-puzzle, body[data-difficulty-level="4"] entropy-puzzle {padding:2rem; text-align:left;} body[data-difficulty-level="3"] puzzle-tile.letter, body[data-difficulty-level="3"] puzzle-tile.number, body[data-difficulty-level="4"] puzzle-tile.letter, body[data-difficulty-level="4"] puzzle-tile.number {margin:3px 3px 4px !important; width:3.25rem; height:3.25rem; text-align:center;} body[data-difficulty-level="3"] puzzle-word.word, body[data-difficulty-level="3"] puzzle-line, body[data-difficulty-level="4"] puzzle-word.word, body[data-difficulty-level="4"] puzzle-line {margin:0 !important; display:inline !important; white-space:normal !important;} #auxiliary {padding-top:6.25rem; padding-right:calc((100vw - 600px) / 2); padding-left:calc((100vw - 600px) / 2); width:100%;} #hints-tier-1 ul li button {padding:0; width:85%; font-size:1rem; line-height:3;} #game-stats ul {padding:1.5rem 3rem;} #game-stats h5 {font-size:0.8rem;} #game-stats h5 + span {font-size:1.5rem;} html body[data-auxiliary] #auxiliary #options ul.difficulty li input + label::after {font-size:1.6rem;} html body[data-keyboard="show"] #KioskBoard-VirtualKeyboard {padding:25px 20px 20px; height:285px;} html body.pref-always-show-keyboard #KioskBoard-VirtualKeyboard {height:285px !important;} #auxiliary #reset-board button span {font-size:1rem;} @keyframes set-letter { 0% {transform:scale(0.95);} 33% {transform:scale(1.05);} 67% {transform:scale(1);} } } @media only screen and (max-width:374px) { #player-today ul li.cheer::after {font-size:2.95vw;} }