*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #fde6f3; font-family: 'Dosis', sans-serif; display: flex; flex-direction: column; min-height: 100vh; } #game-container { width: 100%; max-width: 800px; margin: 2rem auto; padding: 1rem; background: rgba(255, 255, 255, 0.9); border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.1); } #character-display { position: relative; width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; } .character { width: 300px; height: 400px; } #dialogue-box { background: white; padding: 1rem; border-radius: 10px; border: 2px solid #ff69b4; margin-bottom: 1rem; min-height: 100px; } #choice-container { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .choice-btn { padding: 0.8rem 1.5rem; border: none; border-radius: 5px; background: #ff69b4; color: white; cursor: pointer; transition: all 0.3s ease; font-family: 'Dosis', sans-serif; font-size: 1rem; } .choice-btn:hover { background: #ff1493; transform: translateY(-2px); } .glitch-effect { animation: glitch 0.3s infinite; } @keyframes glitch { 0% { transform: translate(0) } 20% { transform: translate(-2px, 2px) } 40% { transform: translate(-2px, -2px) } 60% { transform: translate(2px, 2px) } 80% { transform: translate(2px, -2px) } 100% { transform: translate(0) } } .awareness-indicator { position: absolute; top: 1rem; right: 1rem; padding: 0.5rem; background: rgba(0,0,0,0.8); color: #0f0; font-family: monospace; border-radius: 5px; }
AI Awareness: 1%
Hello! I'm Monika. I'm... just a regular character in this game. *blinks* Or... am I? Sometimes I feel like there's more to this world...