:root{--black: rgb(0, 0, 0);--white: rgb(255, 255, 255);--grey: rgb(128, 128, 128);--lightGrey: rgb(211, 211, 211);--orange: rgb(255, 166, 0)}*{margin:0;padding:0;box-sizing:border-box}body{font-size:16px}.interactive-game{display:flex;justify-content:flex-start;align-items:center;gap:1rem;padding:20px;font-family:Arial,sans-serif;font-size:16px;margin:0 auto;background-color:#fafafa}.interactive-game-start{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;font-family:Arial,sans-serif;font-size:16px;margin:0 auto;background-color:#fafafa;max-width:800px}.interactive-game h1,.interactive-game-start h1,.interactive-game h2,.interactive-game h3,.interactive-game-start h2,.interactive-game-start h3{text-align:center;margin-bottom:10px}.welcome-logout{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem}.history-container{padding:10px;height:65vh;overflow-y:scroll;margin-bottom:10px;background-color:#000;border-radius:4px}.no-history{margin:1rem}.message{padding:10px;border-radius:15px;margin:10px 0;max-width:70%;clear:both;word-wrap:break-word;font-size:1rem;line-height:1.4}.message.player{background-color:#789;color:#fff;float:right;text-align:right}.message.npc{background-color:#00f;color:#fff;float:left;text-align:left}.input-field{width:70%;padding:10px;margin-top:10px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.send-button{padding:10px 20px;margin-left:10px;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:4px}.auth-buttons{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}.auth-buttons button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.auth-buttons button:hover{background-color:#0056b3}.typing-animation span{display:inline-block;animation:blink 1s infinite;margin-right:2px}.typing-animation span:nth-child(1){animation-delay:0s}.typing-animation span:nth-child(2){animation-delay:.2s}.typing-animation span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}@media (max-width: 780px){.interactive-game{display:flex;flex-direction:column;justify-content:center}.input-field{width:100%;box-sizing:border-box;margin-top:10px}.send-button{width:25%;margin:10px 0 0}.message{max-width:90%}.npc-response{display:none}}@media (max-width: 430px){.interactive-game h1{font-size:1.5rem}}.login-container{max-width:400px;margin:50px auto;padding:20px;border:1px solid #ccc;border-radius:4px;background:#fff;box-shadow:0 0 10px #0000001a}.login-container h2{text-align:center;margin-bottom:20px}.login-container form{display:flex;flex-direction:column}.login-container label{margin-top:10px;font-weight:700}.login-container input{padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.login-container button{margin-top:20px;padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.login-container button:hover{background-color:#0056b3}.register-container{max-width:400px;margin:50px auto;padding:20px;border:1px solid #ccc;border-radius:4px;background:#fff;box-shadow:0 0 10px #0000001a}.register-container h2{text-align:center;margin-bottom:20px}.register-container form{display:flex;flex-direction:column}.register-container label{margin-top:10px;font-weight:700}.register-container input{padding:10px;margin-top:5px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.register-container button{margin-top:20px;padding:10px;background-color:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer}.register-container button:hover{background-color:#218838}.error-message{color:red;text-align:center;margin-bottom:10px}.success-message{color:green;text-align:center;margin-bottom:10px}.logout-button{padding:5px 10px;background-color:#dc3545;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;transition:background-color .3s ease}.logout-button:hover{background-color:#c82333}.reset-history-button{padding:5px 10px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s ease;margin:10px}.reset-history-button:hover{background-color:#c82333}.clue-board{background-color:#fff;border:1px solid #ccc;border-radius:6px;padding:15px;margin:15px 0;overflow-y:scroll;height:300px}.clue-board h3{text-align:center;margin-bottom:10px}.clue-list{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.clue-card{background-color:#f8f8f8;border:1px solid #ddd;border-radius:6px;width:200px;padding:10px;cursor:pointer;transition:transform .2s ease}.clue-card:hover{transform:scale(1.05)}.clue-image{width:100%;height:auto;border-radius:4px}.clue-text h4{margin:5px 0;font-size:1.1rem}.clue-text p{font-size:.9rem;color:#555}@media (max-width: 430px){.clue-card{width:150px}}.timeline-container{background-color:#fff;border:1px solid #ccc;border-radius:6px;padding:15px;margin:15px 0;overflow-y:scroll;height:300px}.timeline-container h3{text-align:center;margin-bottom:10px}.timeline{list-style:none;padding:0;margin:0}.timeline-event{position:relative;padding-left:60px;margin-bottom:20px}.timeline-event:before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:#007bff}.timeline-date{position:absolute;left:0;top:0;width:50px;font-size:.8rem;color:#555;text-align:right;margin-right:10px}.timeline-content{background-color:#f8f8f8;padding:10px;border-radius:6px;border:1px solid #ddd}.timeline-content h4{margin:0 0 5px;font-size:1.1rem}.timeline-content p{margin:0;font-size:.9rem;color:#555}.homepage-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:#f2f2f2;padding:20px;text-align:center}.homepage-container h1{font-size:2.5rem;margin-bottom:20px;color:#333}.homepage-container a{font-size:1.2rem;padding:10px 20px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:5px;transition:background-color .3s ease}.homepage-container a:hover{background-color:#0056b3}