/* Native geometry and bitmap composition are backed by ui-layout-evidence.json.
   Browser settings, chat input and compact touch controls remain new adapters. */
:root {
  --native-stage-width: 1024;
  --native-stage-height: 768;
  --native-field-width: 822;
  --native-stage-css-width: min(
    100vw,
    calc(100dvh * var(--native-stage-width) / var(--native-stage-height))
  );
  --native-stage-css-height: calc(
    var(--native-stage-css-width) * var(--native-stage-height) /
      var(--native-stage-width)
  );
  --native-v6-wood: url("./assets/native-ui-v5/woodtile@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-horz: url("./assets/native-ui-v5/horzedge@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-vert: url("./assets/native-ui-v5/vertedge@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-under: url("./assets/native-ui-v5/UnderBar@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-ivy: url("./assets/native-ui-v5/IvyEdge@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-guild: url("./assets/native-ui-v5/idguild@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-item: url("./assets/native-ui-v5/itemtile@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-paper: url("./assets/native-ui-v5/bg@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-spell: url("./assets/native-ui-v5/WizardWin@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-store: url("./assets/native-ui-v5/storebg@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-help: url("./assets/native-ui-v5/helpwin@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-menu: url("./assets/native-ui-v5/menutable@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-login: url("./assets/native-ui-v5/CharSelBack@2x.png?v=reconstruction-v62-a04c1bdf5ecf");
}
.native-interface[data-render-quality="original"] {
  --native-v6-wood: url("./assets/native-ui-v5/woodtile.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-horz: url("./assets/native-ui-v5/horzedge.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-vert: url("./assets/native-ui-v5/vertedge.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-under: url("./assets/native-ui-v5/UnderBar.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-ivy: url("./assets/native-ui-v5/IvyEdge.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-guild: url("./assets/native-ui-v5/idguild.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-item: url("./assets/native-ui-v5/itemtile.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-paper: url("./assets/native-ui-v5/bg.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-spell: url("./assets/native-ui-v5/WizardWin.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-store: url("./assets/native-ui-v5/storebg.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-help: url("./assets/native-ui-v5/helpwin.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-menu: url("./assets/native-ui-v5/menutable.png?v=reconstruction-v62-a04c1bdf5ecf");
  --native-v6-login: url("./assets/native-ui-v5/CharSelBack.png?v=reconstruction-v62-a04c1bdf5ecf");
}
.native-interface {
  font-family: "DotumChe", "돋움체", monospace;
  font-size: 12px;
}
.native-interface dialog::backdrop {
  background: transparent;
  backdrop-filter: none;
}
.native-interface .native-sheet-value,
.native-interface .native-item-slot small,
.native-interface .native-item-reserved {
  font-family: "DotumChe", "돋움체", monospace;
}
.native-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.native-hud > div,
.native-hud > img,
.native-map-name-fallback,
.native-main-menu button {
  position: absolute;
}
.native-hud img {
  display: block;
  object-fit: fill;
  image-rendering: pixelated;
}
.native-sidebar {
  background-color: #060505;
  background-image: var(--native-v6-wood);
  background-position: calc(16px * var(--native-ui-scale, 1))
    calc(51px * var(--native-ui-scale, 1));
  background-size: calc(154px * var(--native-ui-scale, 1))
    calc(154px * var(--native-ui-scale, 1));
  background-repeat: repeat-y;
}
.native-top-edge,
.native-bottom-edge {
  background-image: var(--native-v6-horz);
  background-size: calc(357px * var(--native-ui-scale, 1))
    calc(16px * var(--native-ui-scale, 1));
  background-repeat: repeat-x;
}
.native-left-edge,
.native-right-edge {
  background-image: var(--native-v6-vert);
  background-size: calc(16px * var(--native-ui-scale, 1))
    calc(357px * var(--native-ui-scale, 1));
  background-repeat: repeat-y;
}
.native-bottom-wood,
.native-sidebar-bottom {
  background-image: var(--native-v6-under);
  background-size: calc(261px * var(--native-ui-scale, 1))
    calc(38px * var(--native-ui-scale, 1));
  background-repeat: repeat-x;
}
.native-guild-status {
  background: var(--native-v6-guild) center / 100% 100% no-repeat;
}
.native-ivy-slice {
  background-image: var(--native-v6-ivy);
  background-size: calc(322px * var(--native-ui-scale, 1))
    calc(72px * var(--native-ui-scale, 1));
  background-repeat: no-repeat;
}
.native-main-menu button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  pointer-events: auto;
  box-shadow: none;
}
.native-main-icon {
  width: 100%;
  height: 100%;
}
.native-map-name-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #d7bd80;
  font:
    calc(12px * var(--native-ui-scale, 1)) / 1.3 "DotumChe",
    "돋움체",
    monospace;
  text-align: center;
}
.native-hud-frame,
.native-hud-face,
.native-hud-mask {
  pointer-events: none;
}
.native-display-toggle {
  display: none;
}
.native-interface .game-panel {
  width: min(var(--native-panel-width, 455px), calc(100vw - 12px));
  max-width: none;
  max-height: calc(var(--mobile-height, 100dvh) - 12px);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 32px #000a;
  background: var(--native-v6-wood);
  line-height: 1.5;
}
.native-interface .game-panel-heading {
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  z-index: 5;
}
.native-interface .game-panel-heading > div {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.native-interface #game-panel-close {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0;
  width: 54px;
  height: 44px;
  min-width: 54px;
  min-height: 44px;
  z-index: 6;
}
.native-interface .game-panel-tabs,
.native-interface .game-panel-footer {
  display: none;
}
.native-interface .game-panel-content {
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
.native-interface .native-character-sheet,
.native-interface .native-inventory-tray,
.native-interface .native-spell-window,
.native-interface .native-store-window,
.native-interface .native-help-browser,
.native-interface .game-panel-content .menu-grid {
  max-width: none;
  flex-shrink: 0;
  margin: 0;
}
.native-interface .native-character-sheet {
  width: 455px;
  height: 428px;
  aspect-ratio: auto;
}
.native-interface .native-inventory-tray {
  width: 455px;
  height: 334px;
  aspect-ratio: auto;
  background-image: var(--native-v6-paper);
}
.native-interface .native-sheet-items {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: 36px;
}
.native-interface .native-inventory-grid {
  inset: 39px 30px 40px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: 36px;
}
.native-interface .game-panel-content .native-item-slot {
  min-width: 0;
  min-height: 36px;
  height: 36px;
  background-size: 76px 36px;
}
.native-interface .native-item-slot img {
  width: 30px;
  height: 30px;
}
.native-interface .native-spell-window {
  width: 400px;
  min-height: 300px;
  padding: 32px 22px 40px;
  background-image: var(--native-v6-spell);
}
.native-interface .native-store-window {
  width: 455px;
  height: 334px;
  background-image: var(--native-v6-store);
}
.native-interface .native-help-browser {
  width: 455px;
  height: 428px;
  min-height: 428px;
  background-image: var(--native-v6-help);
}
.native-interface .game-panel-content .menu-grid {
  width: 341px;
  min-height: 216px;
  padding: 25px 50px 25px 35px;
  gap: 0;
  background-image: var(--native-v6-menu);
}
.native-interface .native-panel-details {
  margin: 0;
  padding: 0 12px 12px;
  min-width: min(var(--native-panel-width, 455px), 100%);
  background: #18110eea;
  border-top: 1px solid #756341;
}
.native-panel-details > summary {
  display: list-item;
  min-height: 44px;
  padding: 12px 64px 12px 3px;
  cursor: pointer;
  color: #e8d8b7;
  font-size: 12px;
}
.web-action-adapter {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 12px;
  border: 1px solid #7f8d9d;
  border-radius: 8px;
  background: #142030;
  color: #e7edf5;
  font:
    14px/1.5 system-ui,
    sans-serif;
  overflow: auto;
}
.web-action-adapter::backdrop {
  background: #0008;
}
.web-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.web-action-heading h2 {
  margin: 0;
  font: inherit;
  font-weight: 700;
}
.web-action-heading button,
.web-action-tabs button,
.web-action-content button {
  min-height: 44px;
}
.web-action-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.web-action-content .game-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 8px 0;
}
.web-action-content .item-grid,
.web-action-content .equipment-grid,
.web-action-content .quickslot-manager {
  display: block;
}
.native-quickslot-art {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
.native-count-digit {
  display: none;
}
@media (min-width: 951px) {
  body.native-interface {
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #000;
  }
  .native-interface .portal-bar,
  .native-interface .game-heading,
  .native-interface .footnote {
    display: none;
  }
  .native-interface main,
  .native-interface.embedded main {
    width: var(--native-stage-css-width);
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }
  .native-interface .game-shell {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
  }
  .native-interface .play-area {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: var(--native-stage-width) / var(--native-stage-height);
    margin: 0;
    border: 0;
    overflow: hidden;
    background: #000;
  }
  .native-interface #world {
    position: absolute;
    left: calc(16px * var(--native-ui-scale, 1));
    top: calc(16px * var(--native-ui-scale, 1));
    width: calc(100% - 202px * var(--native-ui-scale, 1));
    height: calc(100% - 70px * var(--native-ui-scale, 1));
  }
  .native-interface .player-toolbar,
  .native-interface .game-dock,
  .native-interface .quest-panel,
  .native-interface .scene-tag {
    display: none;
  }
  .native-interface .scene-toolbar {
    display: none;
    position: absolute;
    top: calc(16px * var(--native-ui-scale, 1));
    left: calc(16px * var(--native-ui-scale, 1));
    right: calc(202px * var(--native-ui-scale, 1));
    height: 44px;
    padding: 0 8px;
    border: 1px solid #aa9160;
    z-index: 10;
    background: #1b140fee;
  }
  .native-interface.native-settings-open .scene-toolbar {
    display: flex;
  }
  .native-interface .scene-toolbar select,
  .native-interface .scene-toolbar button {
    min-height: 32px;
    font-size: 12px;
  }
  .native-interface .native-display-toggle {
    display: block;
    position: absolute;
    bottom: calc(18px * var(--native-ui-scale, 1));
    right: calc(24px * var(--native-ui-scale, 1));
    width: 64px;
    min-height: 32px;
    z-index: 8;
    font-size: 12px;
    color: #ead9b0;
    border: 1px solid #82704e;
    background: #21170fd9;
  }
  .native-interface .game-tools {
    display: contents;
  }
  .native-interface .quick-bar {
    position: absolute;
    left: calc(50% - 259px * var(--native-ui-scale, 1));
    bottom: calc(18px * var(--native-ui-scale, 1));
    width: calc(380px * var(--native-ui-scale, 1));
    height: calc(36px * var(--native-ui-scale, 1));
    padding: 0;
    border: 0;
    background: none;
    z-index: 4;
    display: block;
  }
  .native-interface .quick-group:first-child,
  .native-interface .quick-group > span,
  .native-interface #hotkey-settings,
  .native-interface .selected-spell-label {
    display: none;
  }
  .native-interface .quick-group {
    display: block;
    width: 100%;
    height: 100%;
  }
  .native-interface #item-hotkeys {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
  }
  .native-interface #item-hotkeys button {
    position: relative;
    width: 10%;
    flex: 0 0 10%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: var(--native-v6-item) left top /
      calc(76px * var(--native-ui-scale, 1))
      calc(36px * var(--native-ui-scale, 1)) no-repeat;
  }
  .native-interface #item-hotkeys button:hover {
    background-position-x: right;
  }
  .native-interface #item-hotkeys button > kbd,
  .native-interface #item-hotkeys button > span {
    display: none;
  }
  .native-interface #item-hotkeys .native-quickslot-art {
    position: absolute;
    top: calc(2px * var(--native-ui-scale, 1));
    left: calc(3px * var(--native-ui-scale, 1));
    width: calc(32px * var(--native-ui-scale, 1));
    height: calc(32px * var(--native-ui-scale, 1));
  }
  .native-interface #item-hotkeys .quickslot-count {
    inset: 0;
    font-size: 0;
    line-height: 0;
  }
  .native-interface #item-hotkeys .native-count-digit {
    display: block;
    position: absolute;
    top: calc(22px * var(--native-ui-scale, 1));
    width: calc(16px * var(--native-ui-scale, 1));
    height: calc(16px * var(--native-ui-scale, 1));
    image-rendering: pixelated;
  }
  .native-interface .bottom-panels {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    pointer-events: none;
    z-index: 3;
  }
  .native-interface .chat-panel {
    display: contents;
    background: none;
    border: 0;
  }
  .native-interface .chat-panel > .panel-heading {
    display: none;
  }
  .native-interface #chat-messages {
    position: absolute;
    top: calc(16px * var(--native-ui-scale, 1));
    left: 0;
    width: calc(100% - 180px * var(--native-ui-scale, 1));
    height: calc(160px * var(--native-ui-scale, 1));
    padding: 0;
    margin: 0;
    background: none;
    color: #fff;
    font:
      calc(12px * var(--native-ui-scale, 1)) /
        calc(16px * var(--native-ui-scale, 1)) "DotumChe",
      "돋움체",
      monospace;
    text-shadow: 1px 1px #000;
    scrollbar-width: none;
    overflow: hidden;
  }
  .native-interface #chat-messages b,
  .native-interface #chat-messages .system {
    color: inherit;
  }
  .native-interface #chat-form {
    position: absolute;
    left: calc(16px * var(--native-ui-scale, 1));
    bottom: calc(56px * var(--native-ui-scale, 1));
    width: calc(100% - 202px * var(--native-ui-scale, 1));
    min-height: 24px;
    padding: 0 4px;
    border: 0;
    background: #0006;
    pointer-events: auto;
  }
  .native-interface #chat-input {
    font:
      12px "DotumChe",
      "돋움체",
      monospace;
    color: #fff;
  }
  .native-interface #chat-form button {
    min-height: 24px;
  }
  .native-interface:not(.native-entered) .quick-bar,
  .native-interface:not(.native-entered) .bottom-panels {
    display: none;
  }
  .native-interface .login-panel {
    width: 640px;
    height: 480px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 48px 120px 32px;
    border: 0;
    box-shadow: none;
    background: var(--native-v6-login) center / 640px 480px no-repeat #000;
  }
  .native-interface .login-emblem,
  .native-interface .login-panel .eyebrow,
  .native-interface .login-panel > small {
    display: none;
  }
}
@media (max-width: 950px) {
  /* Compact controls are an explicit browser adaptation; source popup artwork
     keeps its canvas extents and can be panned, rather than being stretched. */
  .native-hud,
  .native-display-toggle {
    display: none;
  }
  .native-interface .game-panel-content {
    overflow-x: auto;
  }
  .native-interface .native-panel-details > summary,
  .native-interface .menu-grid button {
    min-height: 44px;
  }
  .native-interface .native-stock-list {
    inset: 59px 37px 61px;
  }
  .native-interface .native-store-window > h3 {
    top: 28px;
  }
}
