/* The connection guide stays separate from game rendering and existing layout rules. */
.home-account-entry { min-height: 28px; padding: 3px 14px; border: 1px solid #d0bfa7; border-radius: 999px; color: #425d56; background: #fff7e8; font-size: 12px; font-weight: 800; }
#getCodeButton { width: 100%; margin-bottom: 12px; }
.connect-dialog { font-size: 13px; line-height: 1.6; }
.connect-existing { width: 100%; }
.connect-steps { list-style: none; display: flex; padding: 0; gap: 8px; margin: 20px 0; }
.connect-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #475f56; }
.connect-steps b { display: grid; place-items: center; width: 26px; height: 26px; background: #dcebe2; border: 1px solid #acc6b5; border-radius: 50%; }
.connect-steps small { display: block; font-size: 10px; color: #75616d; }
.connect-consent { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 12px; }
.connect-consent input { flex: none; width: 18px; height: 18px; accent-color: #397c65; }
#connectChallenge { min-height: 4px; max-width: 100%; margin: 8px 0; }
#connectStart { width: 100%; }
.connect-dialog button:disabled { opacity: .55; cursor: not-allowed; }
.connect-status { margin: 14px 0; padding: 10px 12px; border: 1px solid #d2c6af; background: #fff9eb; border-radius: 10px; color: #4f5547; }
.connect-pair { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 16px 12px; background: #fffdf7; border: 1px solid #d9cbb7; border-radius: 12px; }
.connect-pair[hidden], .connect-registered[hidden], .connect-setup[hidden], #connectCancel[hidden] { display: none; }
#connectQr { display: block; width: 240px; height: auto; max-width: 100%; aspect-ratio: 1; background: white; border: 1px solid #eee; }
#connectLink { display: inline-block; color: #245e4c; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-align: center; }
.connect-expiry { margin: 0; color: #6d5a68; font-size: 12px; font-variant-numeric: tabular-nums; }
.connect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.connect-actions button { flex: 1; padding-inline: 10px; }
.connect-registered { border: 1px solid #a7c8b6; border-radius: 12px; padding: 14px; background: #edf6eb; margin: 14px 0; }
.connect-registered h3 { margin: 0 0 8px; }
.connect-registered code { display: block; text-align: center; font: 700 22px ui-monospace, monospace; padding: 12px; user-select: all; color: #235d47; }
.connect-registered button { width: 100%; margin: 8px 0; }
@media (max-height: 620px) { .home-account-entry { min-height: 24px; padding-block: 1px; font-size: 11px; } }