@import url("https://fonts.googleapis.com/css2?family=Cinzel");
body {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#multiplayer-panel {
    position: fixed;
    z-index: 10;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #4b3c43;
    border-radius: 10px;
    background: #17131dcc;
    color: #f4d9c5;
    font: 12px system-ui, sans-serif;
}
#multiplayer-panel input, #multiplayer-panel button { border: 0; border-radius: 6px; padding: 7px 9px; font: inherit; }
#multiplayer-panel input { width: 105px; text-transform: uppercase; letter-spacing: .1em; }
#multiplayer-panel button { background: #ef895e; color: #22171a; font-weight: 700; cursor: pointer; }
#connection-status { color: #bdb0b1; white-space: nowrap; }
#canvas {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}