body {
    margin: 0; min-height: 100vh; user-select: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 16px; box-sizing: border-box;
    background: #0b0e14; color: #fff; font-family: 'Segoe UI', sans-serif;
}
/* scale the game to fit any window while keeping its shape */
canvas {
    width: min(100%, calc((100vh - 230px) * 960 / 560));
    min-width: 320px; height: auto;
    border: 4px solid #232d42; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
#panel {
    display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 960px;
    background: rgba(18, 24, 36, 0.9); padding: 12px 20px; border-radius: 10px; border: 1px solid #232d42;
    font-size: 13px; color: #b5c0cc;
}
.row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.row[hidden], [hidden] { display: none !important; }
button, input, select {
    font: inherit; color: #fff; background: #232d42; border: 1px solid #34405a;
    border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
button:hover:not(:disabled) { background: #2d3a56; }
button:disabled { opacity: 0.4; cursor: default; }
button.accent { background: #3742fa; border-color: #5352ed; }
button.accent:hover { background: #5352ed; }
input { width: 64px; text-align: center; text-transform: uppercase; letter-spacing: 3px; cursor: text; }
.or { color: #6b7789; }
#status { color: #ffa502; text-align: center; min-height: 1em; }
#status:empty { display: none; }
#legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }