.frame-fit {
  display: contents;
}
.native-extras,
.native-character-head {
  display: none;
}
.native-stat-surface,
.native-profession-surface {
  display: none;
}
@media (min-width: 0px) {
  body.native-ui:not(.portal-runtime) #game {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 76px);
  }
  body.native-ui #game {
    min-height: 0;
  }
  body.native-ui #frame-fit {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #090c09;
  }
  body.native-ui #game .game-shell {
    flex: 0 0 640px;
    width: 640px;
    height: 480px;
    min-height: 480px;
    display: grid;
    grid-template-rows: 363px 117px;
    border: 0;
    box-shadow: none;
    transform: scale(var(--native-scale, 1));
    transform-origin: center;
    font-family: Arial, "Malgun Gothic", sans-serif;
  }
  body.native-ui #game .stage {
    height: 363px;
    min-height: 363px;
    aspect-ratio: auto;
    overflow: visible;
    z-index: 1;
  }
  body.native-ui .hud-shell {
    display: block;
    position: relative;
    width: 640px;
    height: 117px;
    min-height: 117px;
    padding: 0;
    border: 0;
    background: #000 var(--native-bottom) 0 0/640px 117px no-repeat;
    image-rendering: pixelated;
  }
  body.native-ui .vitals {
    top: 363px;
    left: 0;
    width: 640px;
    height: 117px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    z-index: 4;
  }
  body.native-ui .vitals-name,
  body.native-ui .vitals-foot {
    display: none;
  }
  body.native-ui .vitals label {
    position: absolute;
    width: 42px;
    height: 6px;
    font-size: 0;
    gap: 0;
  }
  body.native-ui .vitals label:has(#hp) {
    left: 573px;
    top: 19px;
  }
  body.native-ui .vitals label:has(#inner) {
    left: 572px;
    top: 33px;
  }
  body.native-ui .vitals label:has(#stamina) {
    left: 590px;
    top: 75px;
  }
  body.native-ui .vitals meter {
    width: 42px;
    height: 6px;
    flex: none;
  }
  body.native-ui .vitals output {
    display: none;
  }
  body.native-ui .vitals meter::-webkit-meter-optimum-value {
    background: #777;
  }
  body.native-ui .native-extras {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  body.native-ui .native-extras button {
    pointer-events: auto;
  }
  body.native-ui .native-coordinate {
    position: absolute;
    left: 51px;
    top: 96px;
    width: 40px;
    height: 13px;
    text-align: center;
    color: white;
    font-size: 10px;
  }
  body.native-ui .native-missing-gauge {
    position: absolute;
    width: 42px;
    height: 6px;
    line-height: 5px;
    font-size: 8px;
    text-align: center;
    color: #646464;
  }
  body.native-ui .native-select-magic,
  body.native-ui .native-open-attrib {
    position: absolute;
    top: 88px;
    width: 48px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--native-selectUp) center/48px 29px no-repeat;
  }
  body.native-ui .native-select-magic {
    left: 101px;
  }
  body.native-ui .native-select-magic:active {
    background-image: var(--native-selectDown);
  }
  body.native-ui .native-open-attrib {
    left: 467px;
    background-image: var(--native-attribUp);
  }
  body.native-ui .native-open-attrib:active {
    background-image: var(--native-attribDown);
  }
  body.native-ui .hud-shell .chat {
    position: absolute;
    left: 146px;
    top: 29px;
    width: 330px;
    height: 78px;
    display: block;
    max-height: none;
  }
  body.native-ui .chat ol {
    height: 56px;
    padding: 0;
    background: #000;
    font-size: 12px;
    line-height: 14px;
  }
  body.native-ui .chat li {
    padding: 0;
    line-height: 14px;
  }
  body.native-ui .chat form {
    position: absolute;
    left: 10px;
    top: 63px;
    width: 311px;
    height: 15px;
    border: 0;
  }
  body.native-ui .chat input {
    padding: 0;
    font-size: 12px;
    background: #000;
    border-radius: 0;
  }
  body.native-ui .chat input::placeholder {
    color: #777;
    font-size: 9px;
  }
  body.native-ui .chat form button {
    /* FrmBottom.EdChat is one 311px edit control; Enter submits natively. */
    display: none;
    width: 22px;
    padding: 0;
    font-size: 8px;
    background: #181818;
  }
  body.native-ui .hud-shell .native-menu {
    position: absolute;
    left: 521px;
    top: 93px;
    width: 116px;
    height: 21px;
    display: flex;
    gap: 0;
    z-index: 3;
  }
  body.native-ui .native-menu button {
    position: absolute;
    left: 0;
    width: 24px;
    height: 21px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    font-size: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  body.native-ui .native-menu #skills {
    left: 23px;
  }
  body.native-ui .native-menu #basic {
    left: 46px;
  }
  body.native-ui .native-menu #attributes {
    left: 69px;
  }
  body.native-ui .native-menu #professions {
    left: 92px;
  }
  body.native-ui .native-menu span {
    display: none;
  }
  body.native-ui .native-menu button:hover,
  body.native-ui .native-menu button.active {
    background: #e9da7233;
    box-shadow: inset 0 0 0 1px #a99756;
  }
  body.native-ui .hud-left {
    /* These web action buttons have no FrmBottom DFM rectangle. Keyboard
       bindings remain available; the responsive mobile controls are separate. */
    display: none;
  }
  body.native-ui .native-used-magic {
    position: absolute;
    left: 12px;
    top: 36px;
    width: 52px;
    height: 45px;
    overflow: hidden;
  }
  body.native-ui .native-used-row {
    display: block;
    width: 52px;
    height: 15px;
    line-height: 15px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    font-size: 9px;
    text-align: left;
    overflow: hidden;
  }
  body.native-ui .world-overview {
    width: 82px;
    right: 5px;
    top: 5px;
    opacity: 0.4;
  }
  body.native-ui .world-overview canvas {
    width: 80px;
    height: 60px;
  }
  body.native-ui .world-overview span {
    display: none;
  }
  body.native-ui .quick-skills {
    /* FrmSelMagic.FormCreate requests (0,14). This follows that initial request;
       actual movable-window placement was not dynamically measured. */
    left: 0;
    top: 14px;
    bottom: auto;
    transform: none;
    width: 204px;
    height: 53px;
    border: 0;
    background: var(--native-shortcuts) center/204px 53px;
    padding: 0;
    display: block;
  }
  body.native-ui .quick-skill {
    position: absolute;
    top: 5px;
    left: 17px;
    width: 40px;
    height: 40px;
    border: 0;
    background: #000;
  }
  body.native-ui .quick-skill:nth-child(2) {
    left: 59px;
  }
  body.native-ui .quick-skill:nth-child(3) {
    left: 101px;
  }
  body.native-ui .quick-skill:nth-child(4) {
    left: 142px;
  }
  body.native-ui .quick-skill .hotkey,
  body.native-ui .quick-skill .skill-label {
    /* Preserve the native bitmap/icon controls without added web text badges. */
    display: none;
  }
  body.native-ui .quick-skill canvas {
    width: 30px !important;
    height: 30px !important;
  }
  body.native-ui .drawer.native-panel {
    right: 0;
    top: 0;
    bottom: auto;
    width: 180px;
    height: 363px;
    display: block;
    border: 0;
    box-shadow: none;
    background: #000 var(--native-attribute) 0 0/180px 363px no-repeat;
    image-rendering: pixelated;
    font-size: 12px;
  }
  body.native-ui .drawer.native-panel .drawer-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 180px;
    height: 13px;
    padding: 0;
    background: none;
    border: 0;
    z-index: 3;
  }
  body.native-ui .drawer.native-panel .drawer-header h2 {
    position: absolute;
    top: 131px;
    left: 72px;
    width: 97px;
    height: 13px;
    overflow: hidden;
    font:
      11px Arial,
      "Malgun Gothic",
      sans-serif;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }
  body.native-ui .drawer.native-panel .drawer-header #close-drawer {
    margin-left: auto;
    padding: 0 2px;
    font-size: 12px;
    line-height: 13px;
    background: #0009;
  }
  body.native-ui .drawer.native-panel #drawer-content {
    position: absolute;
    left: 11px;
    top: 144px;
    width: 160px;
    height: 202px;
    padding: 0;
    background: #000;
    overflow: auto;
    scrollbar-width: thin;
  }
  body.native-ui .drawer.native-panel .native-character-head {
    display: block;
    position: absolute;
    inset: 0;
    height: 144px;
    pointer-events: none;
    font-size: 11px;
  }
  body.native-ui .native-portrait {
    position: absolute;
    left: 11px;
    top: 31px;
    width: 56px;
    height: 72px;
    background: #080908;
  }
  body.native-ui .native-age,
  body.native-ui .native-virtue {
    position: absolute;
    left: 50px;
    top: 13px;
    width: 29px;
    height: 15px;
    color: #777;
    text-align: center;
  }
  body.native-ui .native-virtue {
    left: 131px;
    top: 12px;
  }
  body.native-ui .native-money {
    position: absolute;
    left: 53px;
    top: 110px;
    width: 74px;
    text-align: center;
  }
  body.native-ui .native-character-name {
    position: absolute;
    left: 12px;
    top: 131px;
    width: 69px;
    height: 13px;
    font-size: 9px;
    line-height: 13px;
    padding: 0;
    border: 0;
    background: #000;
    overflow: hidden;
    pointer-events: auto;
  }
  body.native-ui .native-body-gauge {
    position: absolute;
    left: 69px;
    width: 42px;
    height: 7px;
  }
  body.native-ui .drawer.native-panel .paperdoll-row,
  body.native-ui .drawer.native-panel .panel-summary {
    display: none;
  }
  body.native-ui .drawer.native-panel .inventory-grid {
    grid-template-columns: repeat(5, 32px);
    gap: 0;
    width: 160px;
    padding-top: 3px;
  }
  body.native-ui .drawer.native-panel .item-slot {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #181818;
    border-radius: 0;
    background: #000;
  }
  body.native-ui .drawer.native-panel .inventory-grid canvas {
    width: 30px !important;
    height: 30px !important;
  }
  body.native-ui .drawer.native-panel .skill-grid {
    grid-template-columns: repeat(4, 40px);
    gap: 0;
  }
  body.native-ui .drawer.native-panel .skill-slot {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #181818;
    border-radius: 0;
    background: #000;
  }
  body.native-ui .drawer.native-panel .skill-slot small {
    display: none;
  }
  body.native-ui .drawer.native-panel .skill-slot canvas {
    width: 36px !important;
    height: 36px !important;
  }
  body.native-ui .drawer.native-panel button {
    white-space: normal;
  }
  body.native-ui .drawer.native-panel .item-actions {
    gap: 2px;
  }
  body.native-ui .drawer.native-panel .item-actions button {
    font-size: 10px;
    padding: 3px;
  }
  body.native-ui .drawer.native-panel .shop-grid,
  body.native-ui .drawer.native-panel .profession-grid {
    grid-template-columns: 1fr;
  }
  body.native-ui .native-stat-surface,
  body.native-ui .native-profession-surface {
    display: block;
    position: relative;
    width: 160px;
    height: 202px;
    background: var(--native-attributes) 0 0/160px 202px no-repeat;
  }
  body.native-ui .native-profession-surface {
    background-image: var(--native-professions);
  }
  body.native-ui .native-stat-value {
    position: absolute;
    left: 67px;
    width: 80px;
    height: 12px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    text-align: right;
    font-size: 10px;
    line-height: 12px;
  }
  body.native-ui .native-profession-button {
    position: absolute;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  body.native-ui .native-profession-button:hover {
    outline: 1px solid #b9a76d;
  }
  body.native-ui .drawer.native-panel[data-panel="attributes"] .body-gauges,
  body.native-ui .drawer.native-panel[data-panel="attributes"] .stat-list,
  body.native-ui .drawer.native-panel[data-panel="attributes"] .attribute-row,
  body.native-ui .drawer.native-panel[data-panel="attributes"] .muted {
    display: none;
  }
  body.native-ui .target-card {
    width: 155px;
    top: 5px;
    padding: 4px;
    font-size: 10px;
  }
}