/* Feature-local styles: keep upstream title/components styles untouched. */
.sp-binding-callsign { display: grid; gap: .1rem; margin: 0; }
.sp-binding-callsign__label { display: flex; align-items: baseline; gap: .1rem; color: var(--text-lo); font-size: calc(.15 * var(--t)); font-weight: 500; letter-spacing: .04em; }
.sp-binding-callsign__name { display: flex; align-items: center; gap: .12rem; margin: 0; color: var(--text-hi); font-size: calc(.26 * var(--t)); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sp-binding-callsign__icon { flex: none; color: var(--text-lo); }
.sp-binding-callsign__name > span { min-width: 0; }
.sp-binding-entry { display: flex; justify-content: flex-end; width: 4.9rem; margin-top: -.08rem; }
.sp-binding-entry:empty { display: none; }
.sp-binding-entry > .btn { max-width: 100%; white-space: normal; text-align: left; }
.sp-binding .modal__body { display: grid; gap: .2rem; font-size: calc(.18 * var(--t)); }
.sp-binding__intro { color: var(--text-lo); line-height: 1.6; margin: 0; }
.sp-binding__tabs, .sp-binding__channels, .sp-binding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; }
.sp-binding__channels { color: var(--text-lo); font-size: calc(.15 * var(--t)); }
.sp-binding__channels > span { display: inline-flex; align-items: center; gap: .08rem; }
.sp-binding__brand { width: .26rem; height: .26rem; object-fit: contain; flex: none; }
.sp-binding__scan { display: grid; justify-items: center; gap: .16rem; text-align: center; }
.sp-binding__scan p { margin: 0; }
.sp-binding__qr { width: 2.4rem; height: 2.4rem; max-width: 100%; image-rendering: pixelated; background: #fff; }
.sp-binding__form, .sp-binding__roles { display: grid; gap: .16rem; }
.sp-binding__form p, .sp-binding__roles p { margin: 0; line-height: 1.6; }
.sp-binding__code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .12rem; }
.sp-binding__field { min-width: 0; }
.sp-binding__role { justify-content: flex-start; gap: .14rem; height: auto; min-height: .65rem; text-align: left; white-space: normal; }
.sp-binding__role > span { display: grid; gap: .04rem; overflow-wrap: anywhere; }
.sp-binding__role small { color: var(--text-lo); font-size: calc(.14 * var(--t)); }
.sp-binding__error { color: var(--red); overflow-wrap: anywhere; }
.sp-binding__notice { color: var(--mint-500); }
.sp-binding__captcha { border-top: 1px solid var(--line-2); padding-top: .16rem; }
.sp-binding__verifying { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(0, 0, 0, .75); color: var(--text-hi); font-size: calc(.2 * var(--t)); }

/* Short landscape screens: the title scene can be taller than the browser's visual viewport. Anchor the account box
   to the top of the overlay and let its body scroll, so the close action and role list remain reachable. */
@media (max-height: 600px) {
  .sp-binding { align-self: start; max-height: calc(100dvh - .3rem); margin-top: .15rem; }
  .sp-binding .modal__head { padding-top: .12rem; }
  .sp-binding .modal__body { padding-top: .1rem; padding-bottom: .14rem; }
  .sp-binding .modal__actions { padding-top: .1rem; padding-bottom: .1rem; }
}

/* Recovery remains readable on another device even at the game's smallest landscape root scale. */
.sp-account-resume { width: min(94vw, max(6.8rem, 420px)); max-height: calc(100dvh - 24px); }
.sp-account-resume .modal__title { font-size: max(18px, calc(.26 * var(--t))); }
.sp-account-resume .modal__body { display: grid; gap: max(.16rem, 10px); font-size: max(14px, calc(.18 * var(--t))); line-height: 1.7; }
.sp-account-resume .modal__body p { margin: 0; }
.sp-account-resume .btn { min-height: 44px; font-size: max(14px, calc(.17 * var(--t))); }