[hidden] { display: none !important; }
body { margin: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
input, select, textarea { user-select: text; -webkit-user-select: text; }
input { max-width: 100%; box-sizing: border-box; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; }
.header-inner, .room-tools, .lobby-footer, .dialog-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.header-inner { padding-block: .5rem; }
.header-inner .identity-button { margin-inline-start: auto; max-width: 100%; overflow-wrap: anywhere; }
.join-fields { display: flex; flex-wrap: wrap; gap: .5rem; }
#join-form label { display: block; }
#invite-form, #name-form { display: grid; gap: .5rem; justify-items: start; }
.notice {
    position: fixed;
    z-index: 10;
    inset-block-start: max(8px, env(safe-area-inset-top));
    inset-inline-end: max(8px, env(safe-area-inset-right));
    display: flex;
    align-items: start;
    gap: .5rem;
    max-width: min(28rem, calc(100% - 16px));
    box-sizing: border-box;
    padding: .5rem;
    border: 1px solid;
    background: Canvas;
    color: CanvasText;
    overflow-wrap: anywhere;
}
.notice button { flex-shrink: 0; }
.room-tools input { width: min(24rem, 100%); }
.game-card, .lobby-panel { border: 1px solid; padding: .75rem; }
.game-card { margin-block: .75rem; }
.game-meta, .section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; }
.lobby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lobby-panel { min-width: 0; }
.seat-list li { overflow-wrap: anywhere; }
.seat-avatar { display: none; }
.seat-badge { margin-inline-start: .5rem; font-weight: bold; }
.game-option { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.game-option output { min-width: 2ch; }
.table-details { margin-block: .75rem; }
#game-result { margin-block: 1rem; }
#reconnect { margin-block: .5rem; }
@media (max-width: 600px) {
    .lobby-grid { grid-template-columns: minmax(0, 1fr); }
    .header-inner .identity-button { margin-inline-start: 0; }
}