body {
    margin: 0; padding: 10px;
    display: flex; flex-direction: column; align-items: center;
    background: #f0f4f8; font-family: sans-serif;
    overflow-y: auto;
}

#hit-box {
    width: 95%; max-width: 800px; min-height: 40px;
    background: #fff; border: 3px solid #333; border-radius: 15px;
    margin-bottom: 10px; display: flex; flex-wrap: wrap;
    padding: 8px; gap: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

#game-wrap {
    position: relative; width: 100%; max-width: 800px;
    aspect-ratio: 16/10; background: #fff;
    border: 4px solid #333; border-radius: 10px; overflow: hidden;
}

canvas { 
    width: 100%; height: 100%; display: block; 
    touch-action: none;
}

#quiz {
    display: none; position: absolute; inset: 0;
    background: rgba(255,255,255,0.96); z-index: 10;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 10px;
}

/* Mobile Adjustments */
#quiz h2 { margin: 0 0 10px 0; font-size: 1.5rem; color: #2c3e50; }
#options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
#feedback { font-weight: bold; margin: 5px; height: 1.2rem; font-size: 0.9rem; }

button {
    padding: 10px 20px; font-size: 1rem; font-weight: bold;
    border-radius: 10px; border: none; cursor: pointer;
}

.retry-btn { background: #27ae60; color: white; margin-top: 5px; }

.btn-opt {
    background: #fdfdfd; border: 2px solid #ddd;
    color: #333; min-width: 70px;
}

/* Media Query for Small Phones */
@media (max-width: 480px) {
    #quiz h2 { font-size: 1.1rem; margin-bottom: 5px; }
    button { padding: 8px 15px; font-size: 0.9rem; }
    #options { gap: 5px; }
    #hit-box { gap: 5px; padding: 5px; }
    .retry-btn { margin-top: 10px; }
}

.ball-icon {
    width: 20px; height: 20px; border-radius: 50%;
    animation: pop 0.3s ease-out;
}

@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
#hud { font-weight: bold; margin-top: 5px; color: #2c3e50; }