.mobile-toolbar {
  display: none;
}
.mobile-chat-dismiss {
  display: none;
}
@media (max-width: 700px),
  (max-width: 950px) and (max-height: 500px),
  (max-width: 1100px) and (pointer: coarse) {
  .mobile-chat-dismiss {
    display: block;
    min-width: 44px;
  }
  html,
  body {
    height: 100%;
    height: var(--mobile-vh, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    min-height: 0;
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr);
  }
  body.embedded {
    grid-template-rows: minmax(0, 1fr);
  }
  body.embedded .masthead {
    display: none;
  }
  .masthead {
    height: 44px;
    width: 100%;
    padding: 0 8px;
    gap: 5px;
  }
  .wordmark {
    display: block;
    min-width: 0;
  }
  .wordmark span {
    font-size: 13px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .wordmark small {
    display: none;
  }
  .masthead .portal-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    margin-right: auto;
    flex-shrink: 0;
  }
  button,
  input,
  select {
    min-height: 44px;
  }
  button {
    touch-action: manipulation;
  }
  input,
  select {
    font-size: 16px !important;
  }
  .quiet {
    font-size: 11px;
    padding: 5px 8px;
  }
  .masthead .button-row {
    gap: 4px;
  }
  main {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 3px 5px max(4px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: 20px minmax(0, 1fr);
    gap: 3px;
    overflow: hidden;
  }
  .connection-line {
    height: 20px;
    min-width: 0;
    margin: 0 3px;
    align-items: center;
    font-size: 10px;
    gap: 8px;
    overflow: hidden;
  }
  .connection-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #network-status {
    max-width: 60%;
  }
  .game-layout {
    display: block;
    height: 100%;
    min-height: 0;
    position: relative;
  }
  .play-column {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    grid-template-rows: minmax(120px, 1fr) 132px 44px;
    grid-template-areas: "world world" "directions actions" "toolbar toolbar";
    gap: 5px;
  }
  .stage {
    grid-area: world;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    box-shadow: none;
    overflow: hidden;
  }
  .stage > #world {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
    max-width: none;
    aspect-ratio: 4/3;
    touch-action: none;
  }
  .native-controls,
  .original-ui .native-controls {
    display: none;
  }
  .stage-notice {
    font-size: 13px;
    padding: 12px;
    left: 7%;
    right: 7%;
    top: 38%;
    z-index: 4;
  }
  .mobile-controls {
    grid-area: directions;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .mobile-controls > span {
    display: none;
  }
  .dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 4px;
  }
  .dpad button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 18px;
    touch-action: none;
  }
  .dpad button:active {
    background: #8b6c35;
    border-color: #efce85;
  }
  .action-bar {
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 44px);
    margin: 0;
    gap: 0 4px;
    align-content: space-between;
  }
  .action-bar button {
    min-height: 44px;
    min-width: 0;
    padding: 4px;
    font-size: 12px;
  }
  .action-bar button:last-child {
    grid-column: 1/3;
  }
  kbd {
    display: none;
  }
  .mobile-toolbar {
    grid-area: toolbar;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .mobile-toolbar button {
    min-height: 44px;
    padding: 5px;
    font-size: 13px;
  }
  .render-options,
  .footnote {
    display: none;
  }
  #settings-dialog .render-options {
    display: flex;
  }
  .side-panel {
    display: none;
    position: fixed;
    z-index: 30;
    left: 6px;
    right: 6px;
    bottom: 56px;
    max-height: calc(var(--mobile-vh, 100dvh) - 70px);
    overflow: auto;
    border: 1px solid #9d885b;
    background: #18241af5;
    box-shadow: 0 0 30px #000a;
  }
  .mobile-info-open .side-panel,
  .mobile-menu-open .side-panel {
    display: block;
  }
  .commander-card {
    display: none;
  }
  .mobile-info-open .commander-card {
    display: block;
    padding: 14px;
  }
  .mobile-info-open .side-panel > .tabs,
  .mobile-info-open .side-panel > .tab-panel,
  .mobile-info-open .side-panel > .leave {
    display: none;
  }
  .mobile-menu-open .tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #152018;
  }
  .tabs button {
    font-size: 12px;
    min-width: 0;
    min-height: 44px;
    padding: 5px 2px;
  }
  .tab-panel {
    max-height: none;
    padding: 10px;
    overflow: visible;
  }
  .scroll-list,
  .scroll-list.short {
    max-height: calc(100dvh - 235px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .row {
    font-size: 12px;
    min-height: 48px;
    padding: 8px;
  }
  .row .description {
    min-width: 0;
  }
  .row small {
    font-size: 11px;
  }
  .button-row button {
    min-width: 44px;
  }
  .leave {
    display: block;
    width: calc(100% - 20px);
    margin: 8px 10px;
    min-height: 44px;
    grid-column: auto;
  }
  .chat-form,
  .chat-log {
    display: none;
  }
  .mobile-chat-open .chat-form {
    position: fixed;
    z-index: 40;
    display: flex;
    left: 7px;
    right: 7px;
    bottom: 56px;
    margin: 0;
    padding: 6px;
    background: #142019f5;
    border: 1px solid #a18a55;
    gap: 5px;
  }
  .chat-form label {
    display: none;
  }
  .chat-form input {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
  }
  .chat-form button {
    min-width: 50px;
    font-size: 13px;
  }
  .mobile-chat-open .chat-log {
    display: flex;
    left: 7px;
    right: 7px;
    top: auto;
    bottom: 7px;
    width: auto;
    height: 72px;
    max-height: 30%;
    font-size: 13px;
    padding: 5px;
    background: #101911c9;
  }
  .mobile-chat-open .play-column {
    grid-template-rows: minmax(80px, 1fr) 44px;
    grid-template-areas: "world world" "toolbar toolbar";
  }
  .mobile-chat-open .mobile-controls,
  .mobile-chat-open .action-bar {
    display: none;
  }
  dialog {
    max-height: calc(var(--mobile-vh, 100dvh) - 16px);
    overflow: auto;
    padding: 18px;
    font-size: 14px;
  }
  dialog h2 {
    font-size: 23px;
  }
  dialog input {
    min-height: 44px;
  }
  dialog fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  dialog fieldset label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
  }
  dialog input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
  }
  dialog button {
    min-height: 44px;
  }
  body.mobile-keyboard .play-column {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(60px, 1fr);
    grid-template-areas: "world";
  }
  body.mobile-keyboard .mobile-toolbar,
  body.mobile-keyboard .side-panel {
    display: none;
  }
  body.mobile-keyboard.mobile-chat-open .chat-form {
    bottom: calc(8px + var(--mobile-keyboard-inset, 0px));
    right: 7px;
    left: 7px;
  }
  .original-ui .masthead {
    height: 44px;
    padding: 0 8px;
  }
  .original-ui .wordmark span {
    font-size: 13px;
    letter-spacing: 0.03em;
  }
  .original-ui main {
    max-width: none;
    padding: 3px 5px max(4px, env(safe-area-inset-bottom));
  }
  .original-ui .connection-line {
    margin: 0 3px;
  }
  .original-ui .game-layout {
    gap: 0;
  }
  .original-ui .action-bar {
    margin: 0;
    gap: 0 4px;
  }
  .original-ui .action-bar button,
  .original-ui .tabs button,
  .original-ui .leave {
    min-height: 44px;
  }
  .original-ui .tabs button {
    padding: 5px 2px;
  }
  .original-ui .row {
    min-height: 48px;
  }
  .original-ui .side-panel {
    background-color: #caa16d;
  }
  .original-ui .mobile-chat-open .chat-log {
    color: #fff5d7;
  }
  .original-ui dialog {
    max-width: 490px;
    padding: 16px;
  }
}
@media (min-width: 600px) and (max-width: 950px) and (max-height: 500px) {
  main {
    grid-template-rows: 18px minmax(0, 1fr);
    padding-top: 1px;
    gap: 2px;
  }
  .play-column {
    grid-template-columns: minmax(0, 1fr) 192px;
    grid-template-rows: minmax(88px, 1fr) 132px 44px;
    grid-template-areas: "world directions" "world actions" "world toolbar";
    gap: 4px;
  }
  .mobile-controls {
    align-items: center;
  }
  .dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
  }
  .side-panel {
    right: 202px;
    bottom: 6px;
    max-height: calc(var(--mobile-vh, 100dvh) - 12px);
  }
  .mobile-chat-open .chat-form {
    right: 202px;
    bottom: 7px;
  }
  .mobile-chat-open .chat-log {
    right: 7px;
    bottom: 68px;
  }
  .mobile-chat-open .chat-form {
    right: 7px;
    bottom: 56px;
  }
}

/* A portrait full-frame view uses its spare space for actual live commander UI,
   rather than centering a small canvas in a tall black stage. Zoom/chat/menu and
   keyboard modes retain their existing overlay/full-playfield contracts. */
@media (max-width: 700px) and (min-height: 560px) and (orientation: portrait) {
  body.mobile-native-stack .game-layout {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    grid-template-rows:
      var(--mobile-native-height, auto) minmax(110px, 1fr)
      132px 44px;
    grid-template-areas: "world world" "status status" "directions actions" "toolbar toolbar";
    gap: 5px;
  }
  body.mobile-native-stack .play-column,
  body.mobile-native-stack .side-panel {
    display: contents;
  }
  body.mobile-native-stack .side-panel > .tabs,
  body.mobile-native-stack .side-panel > .tab-panel,
  body.mobile-native-stack .side-panel > .leave {
    display: none;
  }
  body.mobile-native-stack .commander-card {
    grid-area: status;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "name class" "hp mp" "stats stats" "target target" "nearby nearby";
    align-content: start;
    gap: 4px 8px;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid #716040;
    background: #1c241e;
  }
  body.original-ui.mobile-native-stack .commander-card {
    color: #2b1a0e;
    background: #caa16d url("assets/ui/skins/paper@2x.png?v=v3-3bf6d39") repeat;
    background-size: 80px 80px;
    border: 4px solid #9c7544;
    border-image: url("assets/ui/skins/window-border@2x.png?v=v3-3bf6d39") 8 / 4px round;
  }
  body.mobile-native-stack .commander-card .eyebrow {
    display: none;
  }
  body.mobile-native-stack #player-name {
    grid-area: name;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.mobile-native-stack #player-class {
    grid-area: class;
    margin: 0;
    align-self: center;
    text-align: right;
    font-size: 10px;
    line-height: 1.5;
  }
  body.mobile-native-stack .meter {
    margin: 0;
    min-height: 20px;
  }
  body.mobile-native-stack .meter.hp {
    grid-area: hp;
  }
  body.mobile-native-stack .meter.mp {
    grid-area: mp;
  }
  body.mobile-native-stack #player-stats {
    grid-area: stats;
    margin: 0;
    font-size: 11px;
    line-height: 1.7;
  }
  body.mobile-native-stack #target-label {
    grid-area: target;
    min-height: 0;
    margin: 0;
    padding-top: 4px;
    line-height: 1.5;
  }
  body.mobile-native-stack #nearby-list {
    grid-area: nearby;
    min-height: 0;
    margin: 0;
  }
  body.mobile-native-stack #nearby-list button {
    min-height: 44px;
    padding: 7px;
    font-size: 12px;
  }
}

#mobile-landscape-leave {
  display: none;
}
/* Primary mobile play: left thumb controls, complete native scene, right actions.
   Move the SAME common fullscreen control into this toolbar; no copied binding. */
@media (min-width: 600px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  body.mobile-landscape {
    grid-template-rows: minmax(0, 1fr);
  }
  body.mobile-landscape .masthead {
    display: none;
  }
  body.mobile-landscape main,
  body.original-ui.mobile-landscape main {
    padding: max(2px, env(safe-area-inset-top))
      max(4px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom))
      max(4px, env(safe-area-inset-left));
    grid-template-rows: 18px minmax(0, 1fr);
    gap: 2px;
  }
  body.mobile-landscape .game-layout {
    display: grid;
    grid-template-columns:
      minmax(144px, 1fr) var(--mobile-landscape-world-width, minmax(0, 1fr))
      minmax(176px, 1fr);
    grid-template-rows: minmax(92px, 1fr) 140px;
    grid-template-areas: "directions world status" "toolbar world actions";
    gap: 4px;
  }
  body.mobile-landscape .play-column {
    display: contents;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .side-panel {
    display: contents;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .side-panel
    > .tabs,
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .side-panel
    > .tab-panel,
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .side-panel
    > .leave {
    display: none;
  }
  body.mobile-landscape .stage {
    align-self: center;
    height: var(--mobile-landscape-world-height, 100%);
    width: 100%;
  }
  body.mobile-landscape .mobile-controls {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  body.mobile-landscape .action-bar,
  body.original-ui.mobile-landscape .action-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 44px);
    align-self: end;
    align-content: start;
    gap: 4px;
    margin: 0;
  }
  body.mobile-landscape .action-bar button {
    min-height: 44px;
    height: 44px;
    font-size: 11px;
    padding: 3px;
  }
  body.mobile-landscape .mobile-toolbar {
    display: grid;
    grid-template-columns: minmax(82px, 1fr) minmax(44px, 1fr);
    grid-template-rows: repeat(3, 44px);
    align-self: end;
    gap: 4px;
    min-width: 0;
  }
  body.mobile-landscape .mobile-toolbar button {
    height: 44px;
    min-height: 44px;
    min-width: 0;
    font-size: 11px;
    padding: 3px;
    white-space: nowrap;
  }
  body.mobile-landscape #mobile-landscape-leave {
    display: block;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .commander-card {
    display: block;
    grid-area: status;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding: 7px;
    border: 1px solid #806340;
    background: #1c241e;
  }
  body.original-ui.mobile-landscape:not(.mobile-menu-open):not(
      .mobile-info-open
    )
    .commander-card {
    background: #caa16d url("assets/ui/skins/paper@2x.png?v=v3-3bf6d39") repeat;
    background-size: 80px 80px;
    border: 4px solid #9c7544;
    border-image: url("assets/ui/skins/window-border@2x.png?v=v3-3bf6d39") 8 / 4px round;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .commander-card
    .eyebrow {
    display: none;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    #player-name {
    font-size: 13px;
    line-height: 18px;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    #player-class {
    font-size: 9px;
    margin: 0 0 4px;
    line-height: 1.4;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open) .meter {
    height: 18px;
    min-height: 18px;
    margin: 3px 0;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    .meter
    span {
    font-size: 10px;
    line-height: 16px;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    #player-stats {
    font-size: 9px;
    margin-top: 5px;
    line-height: 1.5;
  }
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    #target-label,
  body.mobile-landscape:not(.mobile-menu-open):not(.mobile-info-open)
    #nearby-list {
    display: none;
  }
  body.mobile-landscape.mobile-menu-open .side-panel,
  body.mobile-landscape.mobile-info-open .side-panel {
    left: max(6px, var(--mobile-scene-left, 6px));
    right: max(6px, var(--mobile-scene-right, 6px));
    bottom: max(4px, env(safe-area-inset-bottom));
    max-height: calc(var(--mobile-vh, 100dvh) - 8px);
    width: auto;
  }
  body.mobile-landscape.mobile-chat-open .chat-form {
    left: max(6px, var(--mobile-scene-left, 6px));
    right: max(6px, var(--mobile-scene-right, 6px));
    bottom: max(4px, env(safe-area-inset-bottom));
    padding: 4px;
    gap: 3px;
  }
  body.mobile-landscape.mobile-chat-open .chat-log {
    left: 5px;
    right: 5px;
    bottom: 62px;
    font-size: 11px;
  }
}

@media (min-width: 600px) and (max-width: 1100px) and (max-height: 280px) and (orientation: landscape) {
  body.mobile-landscape .game-layout {
    grid-template-columns:
      minmax(188px, 1fr) var(--mobile-landscape-world-width, minmax(0, 1fr))
      minmax(176px, 1fr);
    grid-template-rows: minmax(44px, 1fr) 140px;
  }
  body.mobile-landscape .dpad {
    grid-template-columns: repeat(4, 44px);
    grid-template-rows: 44px;
  }
  body.mobile-landscape .dpad button[data-dir] {
    grid-column: auto;
    grid-row: 1;
  }
}

/* Native mode supersedes the previous permanent portrait/landscape panels. */
body.native-layout {
  grid-template-rows: 44px minmax(0, 1fr);
}
body.native-layout main,
body.original-ui.native-layout main {
  padding: 0 max(4px, env(safe-area-inset-right))
    max(2px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}
body.native-layout .game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "world";
  gap: 0;
}
body.native-layout .play-column {
  display: contents;
}
/* Web touch controls overlay spare letterbox or the world above the source HUD.
   Their existing DOM is moved inside stage so original windows remain above. */
body.native-layout.native-touch-open .game-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "world";
  gap: 0;
}
body.native-layout.native-touch-open .mobile-controls {
  display: flex;
  position: absolute;
  grid-area: auto;
  z-index: 12;
  left: max(var(--native-touch-edge, 8px), env(safe-area-inset-left));
  bottom: var(--native-touch-bottom, 8px);
  width: 140px;
  height: 140px;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
body.native-layout.native-touch-open .mobile-controls > span {
  display: none;
}
body.native-layout.native-touch-open .dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  width: 140px;
  height: 140px;
  pointer-events: auto;
  touch-action: none;
}
body.native-layout.native-touch-open .dpad button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 18px;
}
body.native-layout.native-touch-open .dpad [data-dir="up"] {
  grid-column: 2;
  grid-row: 1;
}
body.native-layout.native-touch-open .dpad [data-dir="left"] {
  grid-column: 1;
  grid-row: 2;
}
body.native-layout.native-touch-open .dpad [data-dir="down"] {
  grid-column: 2;
  grid-row: 3;
}
body.native-layout.native-touch-open .dpad [data-dir="right"] {
  grid-column: 3;
  grid-row: 2;
}
body.native-layout.native-touch-open .action-bar {
  display: grid;
  position: absolute;
  grid-area: auto;
  z-index: 12;
  right: max(var(--native-touch-edge, 8px), env(safe-area-inset-right));
  bottom: var(--native-touch-bottom, 8px);
  width: min(176px, calc(100% - var(--native-touch-edge, 8px) * 2 - 148px));
  min-width: 92px;
  height: 140px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 44px);
  align-content: start;
  gap: 4px;
  margin: 0;
}
body.native-layout.native-touch-open .action-bar button {
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 2px;
  font-size: 11px;
  line-height: 13px;
}
body.native-layout.native-touch-open .action-bar button:last-child {
  grid-column: auto;
}
body.native-layout.native-touch-open .mobile-toolbar {
  display: none;
}
body.native-layout #mobile-landscape-leave {
  display: none;
}
body.native-layout.mobile-keyboard .game-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "world";
  gap: 0;
}
body.native-layout.mobile-keyboard .mobile-controls,
body.native-layout.mobile-keyboard .action-bar,
body.native-layout.mobile-keyboard .mobile-toolbar {
  display: none;
}
body.native-layout.mobile-keyboard #chat-form.native-chat-input {
  display: flex;
  position: fixed;
  z-index: 80;
  left: max(6px, env(safe-area-inset-left)) !important;
  right: max(6px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: calc(6px + var(--mobile-keyboard-inset, 0px)) !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  padding: 4px;
  gap: 4px;
  border: 1px solid #977244;
  background: #151b16;
}
body.native-layout.mobile-keyboard #chat-form.native-chat-input input {
  flex: 1;
  min-height: 44px;
  height: 44px;
  padding: 4px;
  font-size: 16px !important;
}
body.native-layout.mobile-keyboard #chat-form.native-chat-input button {
  display: block;
  min-width: 44px;
  min-height: 44px;
}
body.native-layout.mobile-keyboard #chat-form.native-chat-input[hidden] {
  display: none;
}

/* Keep the web access dock to one 44px row on narrow phones. Text remains in
   the original controls for their accessible names; only the visual labels fit. */
@media (max-width: 700px) {
  body.native-layout #native-access-dock {
    gap: 4px;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  body.native-layout #native-access-dock .portal-link {
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    justify-content: center;
    margin: 0;
    font-size: 0;
    white-space: nowrap;
  }
  body.native-layout #native-access-dock .portal-link::before {
    content: "←";
    font-size: 22px;
  }
  body.native-layout #native-access-dock .button-row {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(5, 44px);
    grid-template-rows: 44px;
    justify-content: end;
    min-width: 0;
    gap: 4px;
  }
  body.native-layout #native-access-dock [data-game-fullscreen] {
    grid-column: 1;
    grid-row: 1;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    font-size: 0 !important;
  }
  body.native-layout #native-access-dock [data-game-fullscreen]::before {
    content: "⛶";
    font-size: 22px;
  }
  body.native-layout
    #native-access-dock
    [data-game-fullscreen][aria-pressed="true"]::before {
    content: "⤢";
  }
  body.native-layout #native-access-dock #native-touch-toggle {
    grid-column: 2;
    grid-row: 1;
    min-width: 44px;
    height: 44px;
    padding: 4px;
    font-size: 0;
  }
  body.native-layout #native-access-dock #native-touch-toggle::before {
    content: "조작";
    font-size: 12px;
  }
  body.native-layout
    #native-access-dock
    #native-touch-toggle[aria-expanded="true"]::before {
    content: "접기";
  }
  body.native-layout #native-access-dock #native-menu-toggle,
  body.native-layout #native-access-dock #native-quality-button,
  body.native-layout #native-access-dock #native-window-zoom,
  body.native-layout #native-access-dock #native-web-button,
  body.native-layout #native-access-dock #native-window-close {
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 2px;
    font-size: 12px;
  }
  body.native-layout #native-access-dock #native-menu-toggle {
    grid-column: 3;
  }
  body.native-layout #native-access-dock #native-window-zoom {
    grid-column: 3;
    font-size: 0;
  }
  body.native-layout #native-access-dock #native-window-zoom::before {
    content: "확대";
    font-size: 12px;
  }
  body.native-layout
    #native-access-dock
    #native-window-zoom[aria-pressed="true"]::before {
    content: "축소";
  }
  body.native-layout #native-access-dock #native-web-button {
    display: none;
    grid-column: 5;
    font-size: 11px;
    white-space: normal;
  }
  body.native-layout #native-access-dock #native-game-windows {
    display: block;
    grid-column: 5;
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    padding: 0;
  }
  body.native-layout #native-access-dock #native-quality-button,
  body.native-layout #native-access-dock #native-window-close {
    grid-column: 4;
  }
  body.native-layout #native-access-dock #native-window-close {
    font-size: 0;
  }
  body.native-layout #native-access-dock #native-window-close::before {
    content: "닫기";
    font-size: 12px;
  }
  body.native-layout:has(#native-window-layer .native-window)
    #native-quality-button,
  body.native-layout.native-window-open #native-menu-toggle,
  body.native-layout #native-access-dock #native-window-zoom[hidden],
  body.native-layout #native-access-dock #native-window-close[hidden],
  body.native-layout #native-access-dock #native-inventory-button {
    display: none;
  }
}

/* Landscape uses the same overlay; opening controls never removes world rows
   or reserves left/right columns from the widened playfield. */