*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',sans-serif;background:linear-gradient(135deg,#FFE66D 0%,#FF6B6B 50%,#4ECDC4 100%);height:100%;display:flex;justify-content:center;align-items:center;color:#fff}.game-container{width:95%;max-width:450px;background:rgba(255,255,255,0.15);backdrop-filter:blur(15px);border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,0.3)}.screen{display:none;animation:fadeIn 0.5s}.screen.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-title{text-align:center;margin-bottom:15px}.title-main{display:block;font-size:2em;font-weight:bold;text-shadow:3px 3px 6px rgba(0,0,0,0.3)}.title-sub{display:block;font-size:1em;opacity:0.9;margin-top:5px}.game-description{text-align:center;font-size:1.1em;margin-bottom:25px}.mode-btn{width:100%;background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.4);border-radius:15px;padding:20px;color:#fff;font-size:1.1em;cursor:pointer;transition:all 0.3s;display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.mode-btn:hover,.mode-btn:active{background:rgba(255,255,255,0.3);transform:scale(1.03)}.mode-name{font-weight:bold;font-size:1.3em}.high-score-display{text-align:center;background:rgba(0,0,0,0.3);padding:15px;border-radius:10px}.game-header{display:flex;justify-content:space-between;margin-bottom:15px;gap:10px}.stat{flex:1;background:rgba(0,0,0,0.3);padding:10px;border-radius:10px;text-align:center}.stat-label{display:block;font-size:0.8em;margin-bottom:5px}.stat-value{display:block;font-size:1.4em;font-weight:bold}.target-color-stat{display:flex;flex-direction:column;align-items:center;gap:5px}.target-color-indicator{width:50px;height:50px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,0.3);animation:pulse 1s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}#game-canvas{display:block;width:100%;background:#87CEEB;border-radius:10px;margin-bottom:15px;box-shadow:inset 0 4px 15px rgba(0,0,0,0.2)}.feedback{text-align:center;font-size:1.5em;font-weight:bold;height:40px;opacity:0;transition:opacity 0.3s}.feedback.show{opacity:1}.feedback.correct{color:#4AFF4A;text-shadow:0 0 15px #4AFF4A}.feedback.wrong{color:#FF4A4A;text-shadow:0 0 15px #FF4A4A}.feedback.info{color:#FFD700;text-shadow:0 0 15px #FFD700}.result-title{text-align:center;font-size:2em;margin-bottom:20px}.result-stats{background:rgba(0,0,0,0.3);padding:20px;border-radius:15px;margin-bottom:20px}.result-stat{display:flex;justify-content:space-between;padding:10px;margin-bottom:10px;background:rgba(255,255,255,0.1);border-radius:8px}.result-value{font-size:1.3em;font-weight:bold}.result-stat.high-score{background:rgba(255,215,0,0.3)}.result-rank{text-align:center;margin-top:15px;padding:15px;background:rgba(255,255,255,0.2);border-radius:10px}.rank-value{display:block;font-size:3em;font-weight:bold}.retry-btn,.back-btn{width:100%;padding:15px;margin-bottom:10px;font-size:1.2em;border:none;border-radius:10px;cursor:pointer;font-weight:bold}.retry-btn{background:linear-gradient(135deg,#FFE66D 0%,#FF6B6B 100%);color:#fff}.back-btn{background:rgba(255,255,255,0.2);color:#fff;border:2px solid rgba(255,255,255,0.4)}@media(max-width:600px){.title-main{font-size:1.6em}}@media(hover:none){.mode-btn:hover{transform:none}}