:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #081329;
  color: #e8f4ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

html, body, #phaserLab {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas, button { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.lab-bar,
.lab-metrics,
.lab-help,
.lab-vitals,
.lab-control-notice,
.lab-dialogue {
  position: fixed;
  z-index: 5;
  border: 1px solid rgba(164, 209, 255, .22);
  background: rgba(6, 14, 31, .78);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px);
}

.lab-bar {
  inset: 14px 14px auto;
  min-height: 52px;
  padding: 9px 12px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lab-bar div:first-child,
.lab-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lab-bar strong { color: #6ee7d8; letter-spacing: .12em; }
.lab-bar span { color: #a8bbd2; font-size: 13px; }
.lab-actions a { color: #d9ebff; font-size: 13px; text-decoration: none; }
.lab-actions a:hover { color: #6ee7d8; }
.lab-icon-button { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(171,207,247,.17); border-radius: 8px; background: rgba(255,255,255,.06); color: #eef7ff; font-size: 15px; }
.lab-icon-button:hover,.lab-icon-button.active { border-color: rgba(110,231,216,.55); background: rgba(110,231,216,.14); }
.lab-icon-button.unread { border-color: #efd176; box-shadow: 0 0 0 2px rgba(239,209,118,.15),0 0 18px rgba(239,209,118,.2); }
.lab-reference-button { height: 30px; padding: 0 9px; border: 1px solid rgba(245,196,91,.42); border-radius: 7px; background: rgba(111,70,18,.3); color: #f6dc91; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.lab-reference-button::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 1px; background: #f2bd58; box-shadow: 0 0 8px rgba(242,189,88,.5); }
.lab-reference-button[aria-pressed="false"] { border-color: rgba(171,207,247,.17); background: rgba(255,255,255,.04); color: #91a5bb; }
.lab-reference-button[aria-pressed="false"]::before { background: #65758a; box-shadow: none; }
.lab-reference-button:disabled { cursor: not-allowed; opacity: .46; }

#labConnection::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: #ffd166;
}

#labConnection[data-state="online"]::before { background: #6ee7a8; }
#labConnection[data-state="offline"]::before { background: #ff718d; }

.lab-metrics {
  top: 158px;
  left: 14px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #c9d9eb;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-line;
}

.lab-minimap {
  position: fixed;
  z-index: 6;
  top: 130px;
  right: 14px;
  width: 244px;
  padding: 7px;
  border: 1px solid rgba(164,209,255,.3);
  border-radius: 8px;
  background: rgba(5,13,29,.8);
  box-shadow: 0 9px 24px rgba(0,0,0,.27);
  backdrop-filter: blur(9px);
}
.lab-minimap header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 5px; font-size: 10px; letter-spacing: .08em; }
.lab-minimap header b { color: #f0d889; }
.lab-minimap header span { color: #9ac7e8; font-size: 9px; }
.lab-minimap canvas { width: 100%; height: 108px; border: 1px solid rgba(117,172,218,.36); background: #071426; image-rendering: pixelated; }
.lab-minimap small { display: block; margin-top: 3px; color: #839bb6; font-size: 8px; text-align: center; }

.lab-vitals {
  top: 80px;
  left: 14px;
  width: 205px;
  padding: 10px 12px;
  border-radius: 11px;
}

.lab-life-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.lab-life-row span { color: #ffb0bd; }
.lab-life-row b { color: #f8fbff; font-size: 11px; }
.lab-life-track { height: 8px; margin: 7px 0 6px; overflow: hidden; border-radius: 99px; background: #020611; }
.lab-life-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#db315c,#ff6685); transition: width .18s ease; }
.lab-heart-row { display: none; }
.lab-vitals small { display: block; overflow: hidden; color: #efd98b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.lab-help {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #a8bbd2;
  font-size: 12px;
}

.lab-help b { color: #f0d889; }

.lab-hotbar {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: 54px;
  display: flex;
  gap: 5px;
  padding: 6px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 3px;
  background: transparent;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.55));
}

.lab-slot {
  position: relative;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 2px solid rgba(164,194,232,.48);
  border-radius: 4px;
  background: linear-gradient(135deg,rgba(53,98,154,.96),rgba(24,52,102,.97));
  color: #edf6ff;
  box-shadow: inset 2px 2px rgba(255,255,255,.11),inset -2px -2px rgba(1,10,35,.32);
}

.lab-slot.selected { border-color: #f5d269; box-shadow: 0 0 0 2px rgba(73,43,13,.8),inset 2px 2px rgba(255,248,182,.18),inset -2px -2px rgba(67,34,4,.28); transform: translateY(-4px) scale(1.08); }
.lab-slot:disabled { opacity: .8; }
.lab-slot-key { position: absolute; top: 2px; left: 4px; color: #8ea5bd; font-size: 8px; }
.lab-slot-icon { font: 22px/1 monospace; text-shadow: 0 2px 2px #000; }
.lab-slot-count { position: absolute; right: 3px; bottom: 1px; font: 9px/1 ui-monospace,monospace; }
.lab-slot[title] { cursor: pointer; }

.lab-control-notice {
  top: 80px;
  left: 50%;
  padding: 8px 9px 8px 13px;
  transform: translateX(-50%);
  border-color: rgba(255,210,105,.35);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f4df9e;
  font-size: 11px;
}

.lab-control-notice button,
.lab-dialogue button {
  border: 0;
  border-radius: 7px;
  padding: 6px 9px;
  background: #4dd2c3;
  color: #061622;
  font-weight: 800;
}

.lab-dialogue {
  z-index: 8;
  right: 14px;
  bottom: 112px;
  width: min(340px,calc(100vw - 28px));
  padding: 12px 14px;
  border-color: rgba(241,200,99,.35);
  border-radius: 13px;
}
.lab-dialogue b { color: #ffd77d; font-size: 12px; }
.lab-dialogue p { margin: 6px 0 0; color: #dce8f5; font-size: 12px; line-height: 1.55; }

.lab-inventory,
.lab-chat {
  position: fixed;
  z-index: 9;
  border: 2px solid rgba(139,181,231,.62);
  background: linear-gradient(145deg,rgba(34,78,133,.97),rgba(14,41,91,.98));
  box-shadow: inset 2px 2px rgba(255,255,255,.1),inset -3px -3px rgba(0,8,37,.35),0 10px 0 rgba(0,0,0,.18),0 18px 55px rgba(0,0,0,.48);
}

.lab-inventory {
  top: 78px;
  right: 14px;
  width: min(670px,calc(100vw - 28px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 13px;
  border-radius: 5px;
}
.lab-inventory header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.lab-inventory header div { display: grid; }
.lab-inventory header small { color: #718aa5; font-size: 9px; letter-spacing: .12em; }
.lab-inventory header b { color: #f3f8ff; font-size: 15px; }
.lab-inventory header button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); color: #dceaff; font-size: 19px; }
.lab-panel-title { margin: 12px 0 6px; color: #8fa6be; font-size: 10px; letter-spacing: .08em; }
.lab-inventory-layout { display: grid; grid-template-columns: minmax(0,1fr) 156px; gap: 12px; align-items: start; }
.lab-inventory-main { min-width: 0; }
.lab-character-card { min-width: 0; padding: 8px; border: 1px solid rgba(169,204,239,.24); border-radius: 5px; background: rgba(10,31,70,.42); }
.lab-character-title { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; color: #e8f2ff; font-size: 11px; }
.lab-character-title b { color: #a9d8ff; font-size: 8px; font-weight: 700; }
.lab-character-preview { --paper-shirt: #2e91a1; --paper-hair: #70442e; position: relative; width: 72px; height: 110px; margin: 6px auto 8px; border: 1px solid rgba(158,201,235,.25); background: linear-gradient(#213f72,#14254f); box-shadow: inset 0 0 0 2px rgba(5,12,30,.35); image-rendering: pixelated; }
.lab-character-preview::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 10px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.38); }
.lab-character-preview i { position: absolute; display: block; image-rendering: pixelated; }
.lab-paper-head { z-index: 3; left: 28px; top: 21px; width: 17px; height: 18px; border: 2px solid #54382f; background: #d99b75; }
.lab-paper-hair { z-index: 4; left: 25px; top: 15px; width: 23px; height: 12px; border: 2px solid #3f2d28; background: var(--paper-hair); }
.lab-paper-body { z-index: 2; left: 23px; top: 39px; width: 27px; height: 29px; border: 2px solid #17314a; background: var(--paper-shirt); }
.lab-paper-legs { z-index: 1; left: 25px; top: 67px; width: 23px; height: 28px; border: 2px solid #1c2945; background: repeating-linear-gradient(90deg,#30456a 0 8px,#1c2d4c 8px 13px); }
.lab-paper-accessory { z-index: 5; top: 48px; right: 12px; color: #ffe58a; font: normal 18px/1 serif; opacity: .12; text-shadow: 0 0 7px #ffd670; }
.lab-character-preview.has-head .lab-paper-head { border-color: #6b3729; background: #bb7048; box-shadow: 0 -7px 0 #a95f3d, 0 -10px 0 -2px #de986a; }
.lab-character-preview.has-body .lab-paper-body { border-color: #643426; background: #a95f3d; box-shadow: inset 3px 0 #dc9565; }
.lab-character-preview.has-legs .lab-paper-legs { border-color: #643426; background: repeating-linear-gradient(90deg,#b96b44 0 8px,#84442f 8px 13px); }
.lab-character-preview.has-accessory .lab-paper-accessory { opacity: 1; }
.lab-equipment { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.lab-equipment-slot { min-height: 47px; padding: 6px; border: 2px solid rgba(155,190,230,.3); border-radius: 4px; background: rgba(20,52,105,.72); color: #e4effb; text-align: left; box-shadow: inset 1px 1px rgba(255,255,255,.08); font: inherit; }
.lab-equipment-slot:not(:disabled):hover { border-color: #f2d16b; }
.lab-equipment-slot small { display: block; color: #748ba5; font-size: 8px; }
.lab-equipment-slot b { font-size: 10px; }
.lab-inventory-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 4px; }
.lab-inventory-item { min-width: 0; min-height: 49px; padding: 4px 2px; border: 2px solid rgba(159,194,233,.34); border-radius: 4px; background: linear-gradient(145deg,rgba(51,94,151,.92),rgba(22,51,103,.95)); color: #f3f8ff; box-shadow: inset 1px 1px rgba(255,255,255,.09),inset -1px -1px rgba(0,7,31,.25); }
.lab-inventory-item:hover { border-color: #f2d16b; }
.lab-inventory-item.selected { border-color: #f3d374; box-shadow: 0 0 0 1px rgba(255,231,159,.72),inset 1px 1px rgba(255,255,255,.16); }
.lab-inventory-item.empty { min-height: 49px; border-color: rgba(92,126,169,.23); background: rgba(10,28,62,.44); opacity: .52; }
.lab-inventory-item i { display: block; color: #f3d77a; font: normal 21px/1.15 monospace; }
.lab-inventory-item b { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lab-inventory-item small { color: #9fb2c6; font-size: 8px; }
.lab-recipes { display: grid; gap: 6px; }
.lab-recipe { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 9px; border: 1px solid rgba(175,205,239,.25); border-radius: 3px; background: rgba(15,46,99,.58); }
.lab-recipe b { color: #e8f2fd; font-size: 11px; }
.lab-recipe span { color: #8fa5bb; font-size: 9px; }
.lab-recipe em { grid-column: 1; color: #d0ad59; font: normal 8px/1.3 system-ui,sans-serif; }
.lab-recipe em.ready { color: #6fe2b6; }
.lab-recipe button { grid-column: 2; grid-row: 1 / span 3; padding: 7px 9px; border: 0; border-radius: 7px; background: #55d2bf; color: #061620; font-size: 10px; font-weight: 800; }
.lab-recipe button:disabled { background: #253449; color: #71849a; }

.lab-chat { left: 14px; bottom: 110px; width: min(350px,calc(100vw - 28px)); padding: 9px; border-radius: 5px; }
.lab-chat-log { height: 150px; overflow-y: auto; padding: 4px 5px; }
.lab-chat-message { margin-bottom: 5px; color: #cbd9e8; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.lab-chat-message b { color: #6ee7d8; }
.lab-chat-message.system b { color: #efd176; }
.lab-chat form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.lab-chat input { min-width: 0; height: 34px; border: 1px solid rgba(176,210,247,.18); border-radius: 8px; outline: 0; background: #060d1c; color: white; padding: 0 10px; font: 11px system-ui,sans-serif; user-select: text; -webkit-user-select: text; }
.lab-chat input:focus { border-color: #62dccc; }
.lab-chat form button { border: 0; border-radius: 8px; background: #59d9c7; color: #071821; font-size: 10px; font-weight: 800; padding: 0 11px; }

.lab-settings {
  position: fixed;
  z-index: 12;
  left: 14px;
  bottom: 16px;
  width: 210px;
  padding: 9px;
  border: 1px solid rgba(164,209,255,.3);
  border-radius: 6px;
  background: rgba(12,35,76,.94);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.lab-settings header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #f2d784; }
.lab-settings header button { width: 25px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; }
.lab-settings > button, .lab-settings > a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 29px; margin: 3px 0; padding: 5px 7px; border: 1px solid rgba(164,209,255,.25); border-radius: 4px; background: rgba(48,90,149,.8); color: #eff7ff; font-size: 11px; text-decoration: none; }
.lab-settings > button span { color: #f4d775; }

.lab-mobile { position: fixed; z-index: 8; inset: auto 12px 16px; display: flex; justify-content: space-between; pointer-events: none; }
.lab-mobile > div { display: flex; gap: 9px; pointer-events: auto; }
.lab-mobile button { width: 58px; height: 58px; border: 1px solid rgba(191,220,255,.25); border-radius: 50%; background: rgba(5,13,29,.72); color: #f5fbff; font-weight: 800; box-shadow: inset 0 1px rgba(255,255,255,.1); }
.lab-mobile button.active { background: rgba(69,208,191,.35); border-color: #6ee7d8; }
.lab-mobile-actions button:last-child { width: 67px; height: 67px; background: rgba(215,107,76,.35); border-color: rgba(255,173,125,.5); }

.hidden { display: none !important; }

.lab-zoom {
  position: fixed;
  z-index: 6;
  top: 80px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(164, 209, 255, .22);
  border-radius: 11px;
  background: rgba(6, 14, 31, .78);
  backdrop-filter: blur(12px);
}

.lab-zoom button {
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 20px;
  touch-action: none;
}

.lab-zoom button:active { background: rgba(110,231,216,.25); color: #6ee7d8; }
.lab-zoom .lab-camera-focus { margin-left: 2px; border-left: 1px solid rgba(164,209,255,.18); color: #6ee7d8; font-size: 17px; }
.lab-zoom output { min-width: 43px; color: #d7e7f8; font-size: 10px; text-align: center; }

@media (max-width: 640px) {
  .lab-bar span:not(#labConnection), .lab-help b { display: none; }
  .lab-bar { inset: 8px 8px auto; min-height: 46px; }
  .lab-actions a { display: none; }
  .lab-reference-button { width: 32px; padding: 0; overflow: hidden; color: transparent; }
  .lab-reference-button::before { width: 9px; height: 9px; margin: 0; }
  .lab-vitals { top: 62px; left: 8px; width: 165px; }
  .lab-metrics { display: none; }
  .lab-zoom { top: 62px; right: 8px; }
  .lab-minimap { top: 112px; right: 8px; width: 138px; padding: 4px; }
  .lab-minimap header { padding-bottom: 3px; font-size: 8px; }
  .lab-minimap canvas { height: 61px; }
  .lab-minimap small { display: none; }
  .lab-hotbar { bottom: 91px; max-width: calc(100% - 16px); gap: 3px; padding: 4px; overflow-x: auto; }
  .lab-slot { flex: 0 0 39px; width: 39px; height: 39px; }
  .lab-help { bottom: 68px; width: max-content; max-width: calc(100% - 24px); padding: 6px 10px; }
  .lab-dialogue { right: 8px; bottom: 148px; }
  .lab-inventory { top: 60px; right: 8px; max-height: calc(100vh - 158px); }
  .lab-inventory { width: min(520px,calc(100vw - 16px)); }
  .lab-inventory-layout { grid-template-columns: 1fr; gap: 8px; }
  .lab-character-card { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; align-items: center; }
  .lab-character-title { grid-column: 1 / -1; }
  .lab-character-preview { grid-row: 2 / span 2; margin: 0 auto; transform: scale(.82); transform-origin: center; }
  .lab-character-card .lab-panel-title { align-self: end; margin: 0; }
  .lab-equipment { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .lab-equipment-slot { min-height: 39px; padding: 3px; }
  .lab-equipment-slot b { display: none; }
  .lab-inventory-grid { grid-template-columns: repeat(5,minmax(48px,1fr)); }
  .lab-chat { left: 8px; bottom: 148px; }
  .lab-control-notice { top: 120px; }
}

@media (pointer: coarse) {
  .lab-help { pointer-events: none; }
}

/*
 * Temporary private-reference skin.  The gameplay controls stay ordinary DOM
 * buttons so keyboard focus, touch input and the no-asset fallback remain
 * unchanged; only the visual layer is swapped after every listed image has
 * loaded successfully.
 */
.reference-ui-art .lab-hotbar {
  gap: 4px;
  padding: 2px;
  background: rgba(6,14,31,.26);
}

.reference-ui-art .lab-slot {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}

.reference-ui-art .lab-slot.selected {
  border-color: transparent;
  background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png");
  box-shadow: 0 3px 0 rgba(0,0,0,.42),0 0 0 1px rgba(255,238,181,.38);
  transform: translateY(-4px) scale(1.04);
}

.reference-ui-art .lab-slot-key {
  top: 7px;
  left: 8px;
  color: #d3d9ff;
  text-shadow: 1px 1px #161530;
}

.reference-ui-art .lab-slot-icon { font-size: 24px; }
.reference-ui-art .lab-slot-count { right: 7px; bottom: 5px; color: #fff5c7; text-shadow: 1px 1px #151229; }

.reference-ui-art .lab-vitals,
.reference-ui-art .lab-inventory,
.reference-ui-art .lab-chat,
.reference-ui-art .lab-minimap,
.reference-ui-art .lab-character-card {
  border: 8px solid transparent;
  border-image-source: url("/assets/assets/reference/terraria/ui/PanelBorder.png");
  border-image-slice: 9;
  border-image-repeat: round;
  border-radius: 0;
  background-color: #30457f;
  background-image: url("/assets/assets/reference/terraria/ui/InnerPanelBackground.png");
  background-repeat: repeat;
  background-size: 24px 27px;
}

.reference-ui-art .lab-vitals { box-shadow: 0 5px 0 rgba(0,0,0,.22),0 10px 35px rgba(0,0,0,.24); }
.reference-ui-art .lab-life-row { align-items: center; justify-content: flex-start; }
.reference-ui-art .lab-life-row b { margin-left: auto; }
.reference-ui-art .lab-life-row::before {
  content: "";
  flex: 0 0 25px;
  width: 25px;
  height: 27px;
  margin: -2px 2px -2px -1px;
  background: url("/assets/assets/reference/terraria/ui/Heart_Single_Fancy.png") center / contain no-repeat;
  image-rendering: pixelated;
}

.reference-ui-art .lab-inventory,
.reference-ui-art .lab-chat {
  box-shadow: 0 8px 0 rgba(0,0,0,.24),0 18px 55px rgba(0,0,0,.48);
}

.reference-ui-art .lab-minimap { box-shadow: 0 5px 0 rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.32); }
.reference-ui-art .lab-minimap canvas { border-color: rgba(18,20,63,.8); }

.reference-ui-art .lab-equipment-slot,
.reference-ui-art .lab-inventory-item {
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}

.reference-ui-art .lab-inventory-item:hover {
  border-color: transparent;
  background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png");
}

.reference-ui-art .lab-inventory-item.selected {
  border-color: transparent;
  background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png");
  filter: brightness(1.12);
}

.reference-ui-art .lab-character-preview { border-color: rgba(18,20,63,.8); background: #24386d; }

.reference-ui-art .lab-recipe,
.reference-ui-art .lab-chat input {
  border-color: rgba(18,20,63,.78);
  border-radius: 2px;
  background-color: #25386d;
  background-image: url("/assets/assets/reference/terraria/ui/InnerPanelBackground.png");
  background-repeat: repeat;
  background-size: 24px 27px;
}

.reference-ui-art .lab-icon-button {
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}

.reference-ui-art .lab-icon-button:hover,
.reference-ui-art .lab-icon-button.active {
  border-color: transparent;
  background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png");
}

.reference-ui-art #labInventoryToggle {
  background-image: url("/assets/assets/reference/terraria/ui/Craft_Toggle_0.png");
  background-size: 30px 30px;
}

.reference-ui-art #labInventoryToggle.active { background-image: url("/assets/assets/reference/terraria/ui/Craft_Toggle_1.png"); }

.reference-ui-art .lab-zoom {
  gap: 1px;
  padding: 4px;
  border: 7px solid transparent;
  border-image-source: url("/assets/assets/reference/terraria/ui/PanelBorder.png");
  border-image-slice: 9;
  border-image-repeat: round;
  border-radius: 0;
  background-color: #30457f;
  background-image: url("/assets/assets/reference/terraria/ui/InnerPanelBackground.png");
  background-repeat: repeat;
  background-size: 24px 27px;
}

.reference-ui-art .lab-zoom button {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  color: transparent;
  font-size: 0;
  image-rendering: pixelated;
}

.reference-ui-art .lab-zoom button[data-lab-zoom="out"] { background-image: url("/assets/assets/reference/terraria/ui/MinimapButton_ZoomOut.png"); }
.reference-ui-art .lab-zoom button[data-lab-zoom="in"] { background-image: url("/assets/assets/reference/terraria/ui/MinimapButton_ZoomIn.png"); }
.reference-ui-art .lab-zoom .lab-camera-focus {
  margin-left: 0;
  border-left: 0;
  background-image: url("/assets/assets/reference/terraria/ui/MinimapButton_Reset.png");
}
.reference-ui-art .lab-zoom output { min-width: 39px; color: #f5edc7; text-shadow: 1px 1px #15152c; }

.reference-ui-art .lab-mobile button {
  border: 0;
  border-radius: 0;
  background: transparent url("/assets/assets/reference/terraria/ui/HotbarRadial_0.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #f7f5ff;
  text-shadow: 1px 2px #16152d;
  image-rendering: pixelated;
}

.reference-ui-art .lab-mobile button.active {
  border-color: transparent;
  filter: brightness(1.22) saturate(1.18);
}

.reference-ui-art .lab-mobile-actions button:last-child {
  background-image: url("/assets/assets/reference/terraria/ui/Craft_Toggle_0.png"),url("/assets/assets/reference/terraria/ui/HotbarRadial_0.png");
  background-position: center 8px,center;
  background-repeat: no-repeat,no-repeat;
  background-size: 30px 30px,100% 100%;
  border-color: transparent;
  padding-top: 24px;
  font-size: 10px;
}

@media (max-width: 640px) {
  .reference-ui-art .lab-slot { flex-basis: 43px; width: 43px; height: 43px; }
  .reference-ui-art .lab-slot-key { top: 5px; left: 6px; }
  .reference-ui-art .lab-slot-icon { font-size: 21px; }
  .reference-ui-art .lab-slot-count { right: 5px; bottom: 3px; }
  .reference-ui-art .lab-vitals { border-width: 6px; }
  .reference-ui-art .lab-zoom { border-width: 6px; padding: 3px; }
  .reference-ui-art .lab-zoom button { width: 25px; height: 25px; background-size: 23px 23px; }
}

/* Match the Canvas development HUD in the Phaser candidate when the local
 * reference skin is active. The UI remains DOM-based, so this does not change
 * Phaser's world/input ownership. */
.reference-ui-art .lab-bar {
  z-index: 24;
  inset: auto 12px 12px auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.reference-ui-art .lab-bar > div:first-child { display: none; }
.reference-ui-art .lab-actions { gap: 3px; }
.reference-ui-art .lab-actions a { display: none; }
.reference-ui-art #labConnection { display: none; }
.reference-ui-art .lab-reference-button { width: 27px; height: 27px; padding: 0; overflow: hidden; color: transparent; }
.reference-ui-art .lab-reference-button::before { width: 8px; height: 8px; margin: 0; }

.reference-ui-art .lab-hotbar {
  z-index: 22;
  left: 20px;
  top: 20px;
  bottom: auto;
  transform: none;
  padding: 0;
  gap: 4px;
  background: none;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.38));
}
.reference-ui-art .lab-slot.selected { transform: none; filter: brightness(1.1) drop-shadow(0 0 3px rgba(255,222,100,.75)); }

.reference-ui-art .lab-vitals {
  z-index: 22;
  top: 14px;
  right: 276px;
  left: auto;
  width: 184px;
  padding: 4px 6px;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
}
.reference-ui-art .lab-life-row,
.reference-ui-art .lab-life-track { display: none; }
.reference-ui-art .lab-heart-row { display: flex; justify-content: flex-end; min-height: 38px; gap: 0; }
.reference-ui-art .lab-heart-row i {
  display: block;
  width: 36px;
  height: 38px;
  margin-left: -1px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.18) 0 var(--heart-fill, 100%), rgba(20,15,24,.45) var(--heart-fill, 100%) 100%), url("/assets/assets/reference/terraria/ui/Heart_Single_Fancy.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.55));
  image-rendering: pixelated;
}
.reference-ui-art .lab-vitals small { display: none; }

.reference-ui-art .lab-minimap {
  z-index: 22;
  top: 7px;
  right: 8px;
  width: 256px;
  height: 264px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: url("/assets/assets/reference/terraria/ui/MinimapFrame.png") center / 100% 100% no-repeat;
  box-shadow: 1px 2px 0 rgba(0,0,0,.48);
  backdrop-filter: none;
}
.reference-ui-art .lab-minimap header { position: absolute; z-index: 1; right: 12px; bottom: 11px; padding: 0; }
.reference-ui-art .lab-minimap header b { display: none; }
.reference-ui-art .lab-minimap header span { color: #fff6cc; font-size: 13px; font-weight: 700; text-shadow: 2px 2px 0 #1b3059; }
.reference-ui-art .lab-minimap canvas { position: absolute; left: 8px; top: 7px; width: 240px; height: 229px; border: 0; background: #15264c; }
.reference-ui-art .lab-minimap small { display: none; }

.reference-ui-art .lab-zoom {
  z-index: 23;
  top: 238px;
  right: 13px;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  backdrop-filter: none;
}
.reference-ui-art .lab-zoom output { display: none; }
.reference-ui-art .lab-zoom button { width: 18px; height: 18px; background-size: 18px 18px; }

.reference-ui-art .lab-inventory {
  z-index: 29;
  top: 0;
  right: auto;
  left: 20px;
  width: min(476px, calc(100vw - 286px));
  max-height: calc(100vh - 8px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.reference-ui-art .lab-inventory > header { width: 476px; min-height: 20px; margin: 0; padding: 0 0 1px 20px; }
.reference-ui-art .lab-inventory > header small { display: none; }
.reference-ui-art .lab-inventory > header b { color: #fff5bd; font-size: 18px; }
.reference-ui-art .lab-inventory > header button { width: 25px; height: 25px; border: 1px solid #294b7c; border-radius: 0; background: linear-gradient(#7297c9, #385a8c); color: #fff7c7; }
.reference-ui-art .lab-inventory-layout { display: block; width: 476px; }
.reference-ui-art .lab-panel-title { margin: 3px 0 2px 3px; color: #fff6c9; font-size: 16px; letter-spacing: 0; text-shadow: 2px 2px 0 #17325b; }
.reference-ui-art .lab-inventory-main > .lab-panel-title:first-child { display: none; }
.reference-ui-art .lab-inventory-grid { grid-template-columns: repeat(10,44px); grid-auto-rows: 44px; gap: 4px; width: 476px; }
.reference-ui-art .lab-inventory-item { position: relative; width: 44px; min-height: 44px; height: 44px; padding: 0; overflow: visible; }
.reference-ui-art .lab-inventory-item i { margin-top: 8px; font-size: 24px; }
.reference-ui-art .lab-inventory-item b { display: none; }
.reference-ui-art .lab-inventory-item small { position: absolute; right: 5px; bottom: 3px; color: #fff; font-size: 11px; text-shadow: 1px 1px 2px #000, -1px -1px #000; }
.reference-ui-art .lab-recipes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; width: 476px; }
.reference-ui-art .lab-recipe { min-height: 42px; padding: 4px 5px 4px 7px; border: 1px solid rgba(167,202,240,.32); border-radius: 0; background: rgba(48,82,133,.76); }

.reference-ui-art .lab-character-card {
  position: fixed;
  top: 174px;
  right: 20px;
  width: 246px;
  min-height: 345px;
  padding: 5px 7px 7px;
  border: 2px solid #1f416f;
  border-image: none;
  border-radius: 0;
  background: rgba(49,82,132,.88);
  box-shadow: inset 1px 1px #8db0df, inset -2px -2px #213e6a, 2px 3px 0 rgba(0,0,0,.3);
}
.reference-ui-art .lab-character-title { color: #fff5bf; font-size: 16px; }
.reference-ui-art .lab-character-preview { width: 118px; height: 126px; margin: 3px auto 5px; border: 0; background: url("/assets/assets/reference/terraria/ui/PlayerBackground.png") center / 118px 116px no-repeat; box-shadow: none; }
.reference-ui-art .lab-equipment { grid-template-columns: repeat(5,44px); gap: 0; justify-content: center; }
.reference-ui-art .lab-equipment-slot { width: 44px; min-height: 44px; height: 44px; padding: 0; background-image: url("/assets/assets/reference/terraria/ui/DisplaySlots_0.png"); }
.reference-ui-art .lab-equipment-slot small,
.reference-ui-art .lab-equipment-slot b { display: none; }

.reference-ui-art .lab-settings {
  z-index: 30;
  left: 13px;
  bottom: 50px;
  padding: 7px;
  border: 2px solid #183158;
  border-radius: 0;
  background: rgba(53,85,137,.96);
  box-shadow: inset 1px 1px #99b8de, inset -2px -2px #213f70, 2px 3px 0 rgba(0,0,0,.48);
}
.reference-ui-art .lab-settings > button,
.reference-ui-art .lab-settings > a { border-radius: 0; background: linear-gradient(#7196c6, #3f6598); }
.reference-ui-art #labSettingsToggle {
  position: fixed;
  left: 14px;
  bottom: 13px;
  width: 36px;
  height: 35px;
  border: 1px solid #1d3258;
  border-radius: 0;
  background: linear-gradient(#779cd1, #355783);
  box-shadow: inset 1px 1px rgba(255,255,255,.36), inset -1px -1px rgba(0,0,0,.42), 1px 2px 0 rgba(0,0,0,.45);
}

body:has(#labInventoryPanel:not(.hidden)) .lab-hotbar { display: none !important; }

@media (max-width: 1080px) {
  .reference-ui-art .lab-minimap { transform: scale(.82); transform-origin: top right; }
  .reference-ui-art .lab-vitals { right: 220px; transform: scale(.88); transform-origin: top right; }
  .reference-ui-art .lab-inventory { width: min(476px, calc(100vw - 20px)); }
  .reference-ui-art .lab-character-card { right: 12px; }
}

@media (pointer: coarse), (max-width: 640px) {
  .reference-ui-art .lab-bar { right: 6px; bottom: 7px; }
  .reference-ui-art .lab-hotbar { left: 6px; top: 5px; max-width: calc(100vw - 12px); overflow-x: auto; gap: 0; }
  .reference-ui-art .lab-slot { flex-basis: 42px; width: 42px; height: 42px; }
  .reference-ui-art .lab-vitals { top: 53px; right: 149px; width: 115px; transform: none; }
  .reference-ui-art .lab-heart-row { min-height: 23px; }
  .reference-ui-art .lab-heart-row i { width: 22px; height: 23px; }
  .reference-ui-art .lab-minimap { top: 4px; right: 4px; width: 144px; height: 149px; transform: none; }
  .reference-ui-art .lab-minimap canvas { left: 5px; top: 5px; width: 134px; height: 126px; }
  .reference-ui-art .lab-minimap header { right: 7px; bottom: 7px; }
  .reference-ui-art .lab-minimap header span { font-size: 9px; }
  .reference-ui-art .lab-zoom { top: 132px; right: 8px; }
  .reference-ui-art .lab-zoom button { width: 15px; height: 15px; background-size: 15px 15px; }
  .reference-ui-art .lab-inventory { inset: 55px 5px 72px; width: auto; max-height: none; padding: 0 0 8px; }
  .reference-ui-art .lab-inventory > header { width: 420px; max-width: 100%; }
  .reference-ui-art .lab-inventory-layout { display: block; width: 420px; max-width: 100%; }
  .reference-ui-art .lab-inventory-grid { grid-template-columns: repeat(10,42px); grid-auto-rows: 42px; gap: 0; width: 420px; }
  .reference-ui-art .lab-inventory-item { width: 42px; min-height: 42px; height: 42px; }
  .reference-ui-art .lab-inventory-item i { margin-top: 6px; font-size: 20px; }
  .reference-ui-art .lab-recipes { grid-template-columns: 1fr; width: 400px; max-width: 100%; }
  .reference-ui-art .lab-character-card { position: static; width: 245px; margin-top: 8px; }
  .reference-ui-art .lab-settings { left: 7px; bottom: 53px; }
  .reference-ui-art #labSettingsToggle { left: 7px; bottom: 8px; width: 40px; height: 40px; }
}

/* Lab auth + world selector dialogs */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 20, .72);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.modal[open] { display: flex; }
.modal-card {
  position: relative;
  width: min(92vw, 400px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(164, 209, 255, .18);
  background: rgba(8, 19, 41, .94);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  color: #e8f4ff;
}
.modal-card small { color: #6ee7d8; letter-spacing: .12em; font-size: 10px; }
.modal-card h1 { margin: 6px 0 4px; font-size: 20px; }
.modal-card p { margin: 4px 0 12px; font-size: 13px; color: #a8bbd2; }
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #eef7ff; font-size: 16px;
  cursor: pointer;
}
.modal-emblem { color: #6ee7d8; font-size: 20px; }
.modal-card label { display: block; margin: 10px 0; font-size: 13px; color: #a8bbd2; }
.modal-card input {
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid rgba(164, 209, 255, .18);
  border-radius: 8px;
  background: rgba(6, 14, 31, .6);
  color: #e8f4ff;
}
.form-error { color: #ff718d; font-size: 12px; min-height: 18px; margin: 4px 0; }
.primary.wide {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9488, #0891b2);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.primary.wide:hover { filter: brightness(1.1); }
.text-button {
  display: block;
  width: 100%;
  padding: 6px;
  border: none; background: none;
  color: #6ee7d8; font-size: 13px;
  cursor: pointer; text-align: center;
}
.privacy { font-size: 11px; color: #65758a; margin-top: 10px; }

/* World selector (shared with main client) */
.world-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; max-height: 220px; overflow-y: auto; }
.world-list label {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid rgba(164, 209, 255, .18); border-radius: 10px;
  background: rgba(6, 14, 31, .45); cursor: pointer;
  transition: border-color .15s;
}
.world-list label:hover { border-color: rgba(110, 231, 216, .5); }
.world-list input[type="radio"] { accent-color: #6ee7d8; }
.world-list .world-name { flex: 1; font-weight: 600; }
.world-list .world-meta { font-size: 12px; color: #a8bbd2; }
.world-create { margin-top: 12px; }
.world-create summary { cursor: pointer; color: #6ee7d8; font-size: 14px; }
.world-create input[type="text"] {
  width: 100%; padding: 8px 10px; margin: 8px 0;
  border: 1px solid rgba(164, 209, 255, .18); border-radius: 8px;
  background: rgba(6, 14, 31, .6); color: #e8f4ff;
}
.world-sizes { display: flex; gap: 16px; margin: 8px 0 12px; }
.world-sizes label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }

/* Mana bar */
.lab-mana-row { display: flex; gap: 1px; margin-top: 2px; }
.lab-mana-row i { width: 7px; height: 7px; border-radius: 50%; background: #2a4a8a; }
.lab-mana-row i.full { background: #5ca8ff; box-shadow: 0 0 3px rgba(100,180,255,.5); }
.lab-mana-text { font-size: 10px; color: #91a5bb; }

/* Item tooltip */
.lab-item-tooltip {
  position: fixed; z-index: 7; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px; border-radius: 8px;
  background: rgba(6,14,31,.92); border: 1px solid rgba(164,209,255,.2);
  color: #eef7ff; font-size: 12px; white-space: nowrap; pointer-events: none;
}
.lab-item-tooltip .tip-name { font-weight: 700; margin-right: 6px; }
.lab-item-tooltip .tip-stat { color: #6ee7d8; margin-right: 4px; }
.lab-item-tooltip .tip-tag { color: #91a5bb; font-size: 10px; }

/* UI scale */
.lab-settings-scale { margin: 8px 0; }
.lab-settings-scale span { display: block; font-size: 11px; color: #a8bbd2; margin-bottom: 4px; }
.scale-group { display: flex; gap: 5px; }
.scale-group button {
  flex: 1; padding: 5px 3px; border: 1px solid rgba(171,207,247,.17); border-radius: 7px;
  background: rgba(255,255,255,.04); color: #eef7ff; font-size: 11px; cursor: pointer;
}
.scale-group button:hover, .scale-group button.active { border-color: #6ee7d8; background: rgba(110,231,216,.14); }

/* UI scale support */
.lab-vitals { transform: scale(var(--ui-scale, 1)); transform-origin: top left; }
.lab-hotbar { position: fixed !important; z-index: 6 !important; bottom: 16px !important; top: auto !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; width: fit-content !important; transform: scale(var(--ui-scale, 1)) !important; transform-origin: bottom center !important; }
.lab-minimap { transform: scale(var(--ui-scale, 1)); transform-origin: top right; }
.lab-zoom { transform: scale(var(--ui-scale, 1)); transform-origin: top right; }
.lab-metrics { transform: scale(var(--ui-scale, 1)); transform-origin: top left; }