/* One keyboard adapter for the original native naming prompt. */
.sup-native-text { position: fixed; z-index: 6; box-sizing: border-box; left: 50%; transform: translateX(-50%); bottom: calc(var(--sup-keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom))); width: min(370px, calc(100vw - 16px)); margin: 0; padding: 10px; border: 1px solid #697f9d; border-radius: 7px; background: #131c2cf5; box-shadow: 0 6px 24px #0009; color: #eef3fb; font: 14px/1.3 system-ui, sans-serif; }
.sup-native-text[hidden] { display: none; }
.sup-native-text label { display: block; margin-bottom: 5px; color: #f1d878; }
.sup-native-text input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #697f9d; border-radius: 4px; background: #080f1b; color: #eef3fb; font: 18px ui-monospace, monospace; text-transform: uppercase; }
.sup-native-text-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sup-native-text button { min-height: 44px; padding: 8px 14px; }
.sup-native-text button[type=submit] { border-color: #d5bc67; color: #f1d878; }
@media (max-height: 450px) { .sup-native-text { width: min(500px, calc(100vw - 16px)); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 7px; } .sup-native-text label { grid-column: 1 / -1; margin: 0; } .sup-native-text-actions { margin: 0; } }

/* A visual-only keyboard resize need not resize the layout viewport on iOS.
   Retain the complete game above the name controls while the keyboard is open. */
html.sup-native-keyboard { --sup-name-reserve: 160px; }
html.sup-native-keyboard .sup-toolbar { position: fixed; top: var(--sup-name-visible-top, 0px); }
html.sup-native-keyboard main.sup-guidance-layout { position: fixed; top: calc(var(--sup-name-visible-top, 0px) + var(--sup-toolbar-height, 48px)); height: max(0px, calc(var(--sup-name-visible-height, 100dvh) - var(--sup-toolbar-height, 48px) - var(--sup-name-reserve))); grid-template-rows: 1fr; }
html.sup-native-keyboard main.sup-guidance-layout canvas[tabindex] { width: min(100vw, max(0px, calc((var(--sup-name-visible-height, 100dvh) - var(--sup-toolbar-height, 48px) - var(--sup-name-reserve)) * var(--sup-display-ratio, 1.6)))); height: min(calc(100vw / var(--sup-display-ratio, 1.6)), max(0px, calc(var(--sup-name-visible-height, 100dvh) - var(--sup-toolbar-height, 48px) - var(--sup-name-reserve)))); }
html.sup-native-keyboard .sup-guidance { display: none; }
@media (max-height: 450px) { html.sup-native-keyboard { --sup-name-reserve: 100px; } }