.answer-button { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 40px 30px; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; position: relative; overflow: hidden; } .answer-button:hover:not(:disabled) { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); border-color: rgba(255, 215, 0, 0.6); background: rgba(255, 255, 255, 0.15); } .answer-button:active:not(:disabled) { transform: translateY(-2px); } .answer-button:disabled { cursor: default; } .answer-hidden { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } 50% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3); } } .answer-revealed { animation: reveal 0.5s ease-out; } @keyframes reveal { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .answer-placeholder { font-size: 3rem; color: rgba(255, 255, 255, 0.5); font-weight: bold; } .answer-points-hidden { font-size: 4.5rem; font-weight: bold; opacity: 0.7; text-shadow: 0 0 15px currentColor; filter: blur(1px); transition: all 0.3s ease; } .answer-button:hover:not(:disabled) .answer-points-hidden { opacity: 1; filter: blur(0); transform: scale(1.1); } .answer-text { font-size: 2.2rem; color: #fff; font-weight: bold; margin-bottom: 15px; text-align: center; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .answer-points { font-size: 3.5rem; font-weight: bold; text-shadow: 0 0 15px currentColor; } @media (max-width: 768px) { .answer-button { min-height: 80px; padding: 20px 15px; } .answer-text { font-size: 1.1rem; } .answer-points { font-size: 1.5rem; } .answer-points-hidden { font-size: 2rem; } .answer-placeholder { font-size: 2.5rem; } }