@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--perspective: 500px;--header-height: 60px;--background: #050505;--background-primary: #398ecb;--background-100: #111;--background-200: #222;--background-300: #333;--background-400: #444;--background-500: #555;--border-100: #222;--border-200: #444;--border-500: #555;--color-primary: #fff;--color-secondry: #eee;--color-light: #111;--correct: #1ccb1c;--partial-correct: #f9ec37;--wrong: #e85050;--top-space: calc(var(--header-height) + 4vh)}body{margin:0;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;perspective:var(--perspective);background:var(--background);color:var(--color-primary)}.app{header{position:sticky;top:0;left:0;width:100%;height:var(--header-height);border-bottom:1px solid var(--border-100);display:grid;place-items:center;z-index:2;background:var(--background);.logo{font-size:1.5rem;font-weight:800}}footer{height:var(--footer-height);border-top:1px solid var(--border-100);display:grid;place-items:center}}.help{margin-top:calc(var(--top-space) * -1);padding:32px 16px;h2{font-size:1.8rem;margin-bottom:32px}.list{display:grid;gap:24px;h4{font-size:1.25rem;margin-bottom:4px}ul{padding-left:20px;li{margin:8px 0}}.examples li{margin:20px 0;b{display:block;margin-bottom:4px}p{margin-bottom:8px}}}.center{margin:20px 0;text-align:center}}.game{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding-top:var(--top-space);padding-bottom:32px}.timer{position:relative;height:64px;background:var(--background-400);border:1px solid var(--border-200);font-size:1.25rem;display:grid;place-items:center;font-weight:800;border-radius:80px;padding:0 20px;letter-spacing:4px;.result-container{position:absolute;top:-58px;display:flex;flex-direction:column;justify-content:center;align-items:center;.result{display:block;font-size:1rem;color:var(--color-primary);margin-bottom:8px;font-weight:500;letter-spacing:initial;white-space:nowrap}.word{height:40px;background:var(--background-primary);border:1px solid var(--border-500);color:var(--color-primary);border-radius:8px;padding:8px;text-transform:uppercase;font-size:1rem;letter-spacing:initial}}}.words{display:grid;gap:1em;.word{display:flex;gap:1em;.letter{position:relative;transform-style:preserve-3d;width:48px;height:48px;font-weight:700;font-size:1.5rem;transform:rotateX(0);&:nth-child(1){transition-delay:0ms!important}&:nth-child(2){transition-delay:25ms!important}&:nth-child(3){transition-delay:50ms!important}&:nth-child(4){transition-delay:75ms!important}&:nth-child(5){transition-delay:.1s!important}.front,.back{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;border-radius:50%;text-transform:uppercase}.front{border:3px solid transparent;transform:translateZ(2px);background:var(--background-300)}.back{transform:translateZ(-2px) rotateX(180deg)}&.current .front{background:var(--background-300);border-color:var(--border-500)}&.correct,&.partial-correct,&.wrong{transform:rotateX(-180deg);transition:transform .35s cubic-bezier(.6,-.28,.74,.05)}&.correct{.back{background:var(--correct)}}&.partial-correct{.back{color:var(--color-light);background:var(--partial-correct)}}&.wrong{.back{background:var(--wrong)}}}}}.keyboard{display:grid;gap:.5em;.row{display:flex;justify-content:center;gap:.5em;.key{padding:16px;background:var(--background-500);user-select:none;cursor:pointer;font-weight:500;border:1px solid var(--border-200);border-radius:5px;.icon{display:none}&.correct{background:var(--correct)}&.partial-correct{color:var(--color-light);background:var(--partial-correct)}&.wrong{background:var(--wrong)}&:active{opacity:.85}}}}.start-game-btn,.new-game-btn{padding:10px 20px;background:var(--background-primary);color:var(--color-primary);border:none;outline:none;font:inherit;border-radius:8px;cursor:pointer}@media(max-width:768px){:root{--top-space: calc(var(--header-height) + 1vh)}.keyboard{gap:.4em;.row{gap:.4em;.key{padding:10px;font-size:.95rem;.full{display:none}.icon{display:block}}}}}