body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, sans-serif;
    background: #f4f4f7;
    color: #222;
}

main {
    text-align: center;
}

.buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.button {
    padding: 1rem 2.5rem;
    font-family: inherit;
    font-size: 1.25rem;
    border: none;
    border-radius: 8px;
    background: #3b5bdb;
    color: white;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: #2f4ac0;
}

.code {
    font-family: ui-monospace, monospace;
    font-size: 3rem;
    letter-spacing: 0.3em;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

form[hidden] {
    display: none;
}

input.code {
    width: 7ch;
    padding: 0.5rem;
    font-size: 2rem;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
}

.controller-list {
    list-style: none;
    padding: 0;
}

.popups {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.popup {
    padding: 1rem 2rem;
    border-radius: 8px;
    background: #2b8a3e;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: popup 2.5s ease forwards;
}

@keyframes popup {
    0% { opacity: 0; transform: translateY(-1rem) scale(0.9); }
    10% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-1rem) scale(0.9); }
}