body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #0d1117; margin: 0; padding: 1rem; }
.game { max-width: 800px; margin: 1rem auto; background: #181c27; color: #eee; border: 2px solid #333; border-radius: 12px; padding: 1.5rem; }
.game h3 { margin-top: 0; font-size: 1.5rem; text-align: center; }
.info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 0.5rem 1rem; background: #22283a; border-radius: 8px; }
.info-row p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.info-row span { color: #58a6ff; font-size: 1.3rem; }
.words { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-top: .8rem; }
.w { padding: .6rem .8rem; border-radius: 10px; border: 1px solid #444; background:#22283a; color:#eee; cursor:pointer; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; }
.w:hover:not(:disabled) { background: #2d3444; border-color: #58a6ff; transform: translateY(-2px); }
.w:disabled { opacity: .5; cursor: not-allowed; }
.w.correct { background: #1a7f37; border-color: #2ea043; }
.w.wrong { background: #da3633; border-color: #f85149; animation: shake 0.3s; }
.w.missed { background: #6e1a1a; border-color: #da3633; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.result { display: none; margin-top: 1.5rem; padding: 1.5rem; border-radius: 10px; text-align: center; font-size: 1.1rem; line-height: 1.6; }
.result.success { background: #1a7f37; border: 2px solid #2ea043; }
.result.timeout { background: #6e1a1a; border: 2px solid #da3633; }