body { font-family: 'Segoe UI', sans-serif; text-align: center; padding: 10px; background-color: #f0f2f5; margin: 0; }

#setup-screen, #game-area { 
    max-width: 600px; margin: 10px auto; background: white; 
    padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.instructions {
    background: #e9ecef; padding: 15px; border-radius: 8px;
    margin: 15px 0; font-size: 0.9rem; color: #495057; line-height: 1.4; text-align: left;
}

.symbol-preview {
    font-size: 1.5rem; letter-spacing: 8px; color: #007bff;
    margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 10px;
}

/* Responsive Table */
.key-table { 
    margin: 0 auto 20px auto; border-collapse: collapse; 
    table-layout: fixed; width: 100%; 
}
.key-table td { border: 1px solid #333; padding: 8px 0; font-size: 1.8rem; height: 50px; }
.num-row { background-color: #f8f9fa; font-size: 1.2rem !important; color: #555; font-weight: bold; }

/* Target Box */
.target-container { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.target-box { 
    font-size: 5rem; border: 5px solid #007bff; padding: 5px 40px; 
    border-radius: 15px; background: white; 
}

/* Feedback */
.correct-flash { background-color: #d4edda !important; color: #28a745 !important; }
.wrong-flash { background-color: #f8d7da !important; color: #dc3545 !important; }

/* Button Grid */
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.digit-btn { padding: 15px; font-size: 1.5rem; cursor: pointer; border: none; background: #343a40; color: white; border-radius: 10px; touch-action: manipulation; }

#countdown-overlay { 
    font-size: 8rem; color: #e74c3c; font-weight: bold; position: fixed; 
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; 
}

.hidden { display: none !important; }

/* Mobile Adjustments (iPhone) */
@media screen and (max-width: 480px) {
    .key-table td { font-size: 1.3rem; height: 40px; }
    .target-box { font-size: 4rem; }
    .digit-btn { padding: 12px; font-size: 1.3rem; }
}