/* Modernes, klares Design für das Reaktionsspiel */
body {
    background: #000000;
    color: #f7f7f7;
    text-align: center;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
}
h1 {
    font-size: 2.5rem;
    margin-top: 40px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}
#levelSelect p {
    font-size: 1.2rem;
    margin-bottom: 18px;
    color: #fff;
}
.level-btn, #restartBtn, button {
    font-size: 1.5rem;
    padding: 18px 40px;
    margin: 12px 12px;
    border: 2px solid #ff007a;
    border-radius: 12px;
    background: #fff200;
    color: #070709;
    font-weight: bold;
    box-shadow: 0 2px 12px #ff007a44;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border 0.15s, filter 0.15s;
}
.level-btn:hover, #restartBtn:hover, button:hover {
    background: #ff007a;
    color: #fff200;
    border: 2px solid #fff200;
    filter: brightness(1.12);
}
#timer {
    font-size: 2rem;
    margin: 24px 0 10px 0;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff200;
}
#scoreCounter {
    font-size: 2rem;
    font-weight: bold;
    color: #ff007a;
    margin: 18px 0 0 0;
    letter-spacing: 1px;
}
#message {
    font-size: 1.3rem;
    margin: 20px 0 10px 0;
    min-height: 2.2em;
    color: #fff;
}
.circle {
    background: #fff200;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    border: 4px solid #ff007a;
    box-shadow: 0 4px 16px #fff20099;
    transition: background 0.15s, transform 0.1s;
    z-index: 10;
}
.circle:active {
    background: #ff007a;
    transform: scale(0.93);
}
.theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 100;
    background: #fff;
    color: #222;
    border: 2px solid #222;
    border-radius: 20px;
    font-size: 1.1rem;
    padding: 8px 18px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.15s, color 0.15s, border 0.15s;
}
.theme-toggle.dark {
    background: #222;
    color: #fff;
    border: 2px solid #fff;
}
body.dark {
    background: #181a1b;
    color: #f7f7f7;
}
#authContainer {
    max-width: 340px;
    margin: 40px auto 0 auto;
    padding: 24px 24px 18px 24px;
    background: #232526;
    border-radius: 18px;
    box-shadow: 0 2px 16px #0007;
    display: block;
}
#authContainer input {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #444;
}
#authContainer button {
    width: 100%;
    padding: 10px 0;
    background: #ffd700;
    color: #232526;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    margin-bottom: 8px;
}
#authContainer button:hover {
    background: #ffe066;
    color: #181a1b;
}
#authMsg {
    color: #ff007a;
    font-size: 1rem;
    margin-top: 8px;
    min-height: 1.5em;
}
.highscore-animate {
    animation: highscorePop 0.7s;
}
@keyframes highscorePop {
    0% { color: #fff200; transform: scale(1.2); }
    60% { color: #fff200; transform: scale(1.3); }
    100% { color: inherit; transform: scale(1); }
}
.circle.pulse {
    animation: pulse 0.25s;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
#scoreCounter.flash {
    animation: flashScore 0.3s;
}
@keyframes flashScore {
    0% { color: #fff200; }
    100% { color: #ff007a; }
}
#highscores p {
    color: #fff200;
    font-weight: bold;
    font-size: 1.2rem;
    background: #18181c;
    border-radius: 10px;
    margin: 8px auto;
    padding: 8px 0;
    width: 260px;
    box-shadow: 0 2px 8px #fff20033;
}
@media (max-width: 600px) {
    h1 { font-size: 1.3rem; }
    .level-btn { font-size: 1rem; padding: 10px 12px; }
    #timer, #scoreCounter { font-size: 1rem; }
    .circle { width: 50px !important; height: 50px !important; }
}