:root {
  color-scheme: dark;
  --glass: rgba(10, 17, 29, .76);
  --line: rgba(255, 255, 255, .13);
  --text: #f4f7fb;
  --muted: #9aa8b9;
  --gold: #ffd166;
  --cyan: #6ee7d8;
  --green: #71d36b;
  --danger: #ff6577;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #08101d; color: var(--text); }
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button, input { font: inherit; }
button { color: inherit; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: none; touch-action: none; }
.glass { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 10px 35px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(12px); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.topbar { position: fixed; left: 18px; right: 18px; top: 14px; min-height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; z-index: 5; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 11px; letter-spacing: .03em; }
.brand-gem { color: var(--cyan); font-size: 27px; filter: drop-shadow(0 0 10px rgba(110,231,216,.65)); }
.brand b { display: block; font-size: 17px; line-height: 1.05; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .24em; }
.server-state { display: flex; gap: 9px; align-items: center; color: #c5cfdb; font-size: 12px; }
.server-state i { width: 8px; height: 8px; border-radius: 50%; background: #eab308; box-shadow: 0 0 9px currentColor; }
.server-state i.online { background: #55d982; }
.server-state i.offline { background: #ef5265; }
.divider { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.sound-toggle { pointer-events: auto; width: 29px; height: 29px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.055); color: white; cursor: pointer; font-size: 13px; }
.sound-toggle:hover { background: rgba(255,255,255,.12); }
.sound-toggle.muted { opacity: .5; filter: grayscale(1); }
.sound-toggle.completed { border-color: rgba(110,231,216,.5); box-shadow: 0 0 10px rgba(110,231,216,.22); }
.roadmap-link { pointer-events: auto; min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(110,231,216,.22); border-radius: 8px; background: rgba(110,231,216,.07); color: #bcefe6; font-size: 10px; text-decoration: none; }
.roadmap-link:hover { background: rgba(110,231,216,.15); border-color: rgba(110,231,216,.4); }
.roadmap-link b { display: none; font-size: 13px; }

:root {
  --ui-scale: 1;
}
.vitals { position: fixed; z-index: 5; right: 18px; top: 82px; width: 225px; padding: 10px 12px; border-radius: 12px; transform: scale(var(--ui-scale)); transform-origin: top right; }
.vital-label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; color: #ffb2ba; }
.vital-label b { color: white; font-size: 10px; }
.health-track { height: 8px; border-radius: 99px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 1px 3px #000; }
.health-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #dc354d, #ff6577); box-shadow: 0 0 8px rgba(255,101,119,.5); transition: width .2s; }
.defense-readout { display: flex; justify-content: space-between; margin-top: 8px; color: #d9a75e; font-size: 10px; }
.defense-readout b { color: #fff2d6; }

.right-rail { position: fixed; right: 18px; top: 82px; width: 230px; z-index: 5; display: grid; gap: 10px; }
.minimap-shell { padding: 7px; border-radius: 12px; position: relative; height: 112px; overflow: hidden; }
#minimap { display: block; width: 100%; height: 100%; image-rendering: pixelated; border-radius: 7px; opacity: .9; }
#worldClock { position: absolute; right: 11px; bottom: 10px; padding: 3px 7px; background: rgba(3,8,18,.75); border-radius: 6px; font-size: 10px; color: #e9eef7; }
.online { border-radius: 12px; padding: 10px; max-height: 168px; overflow: auto; }
.panel-title { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 8px; }
.player-list { display: grid; gap: 5px; font-size: 12px; }
.player-list button { display: flex; align-items: center; gap: 7px; border: 0; background: rgba(255,255,255,.04); border-radius: 7px; padding: 6px 7px; cursor: pointer; text-align: left; }
.player-list button:hover { background: rgba(255,255,255,.09); }
.player-dot { width: 8px; height: 8px; border-radius: 2px; background: hsl(var(--hue), 62%, 62%); box-shadow: 0 0 7px hsl(var(--hue), 70%, 55%); }
.paper-doll { min-height: 136px; padding: 9px; border-radius: 12px; display: grid; grid-template-columns: 68px 1fr; column-gap: 8px; }
.paper-doll-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.paper-doll-heading b { color: #f1c47d; font-size: 9px; letter-spacing: 0; }
.paper-doll-figure { position: relative; width: 58px; height: 90px; align-self: end; margin: 0 auto; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.paper-doll-figure i { position: absolute; display: block; image-rendering: pixelated; }
.paper-hair { left: 18px; top: 8px; width: 23px; height: 12px; background: var(--paper-hair, #44342e); border-radius: 6px 6px 2px 2px; z-index: 3; }
.paper-head { left: 19px; top: 14px; width: 21px; height: 20px; background: #d99b75; border-radius: 4px 4px 6px 6px; z-index: 2; box-shadow: inset 4px 0 rgba(255,236,202,.17); }
.paper-body { left: 15px; top: 33px; width: 30px; height: 29px; background: var(--paper-shirt, #2d7b94); border-radius: 4px 4px 2px 2px; z-index: 2; box-shadow: inset 5px 0 rgba(255,255,255,.13); }
.paper-leg { top: 60px; width: 10px; height: 26px; background: #334159; z-index: 1; }
.paper-leg-left { left: 18px; transform: skewY(3deg); }
.paper-leg-right { left: 32px; transform: skewY(-3deg); }
.paper-helmet, .paper-chest, .paper-greaves, .paper-accessory { display: none !important; z-index: 5; }
.paper-doll-figure.has-head .paper-helmet { display: block !important; left: 16px; top: 6px; width: 28px; height: 13px; background: var(--armor-head, #b96843); border: 2px solid rgba(0,0,0,.3); border-radius: 5px 5px 2px 2px; box-shadow: inset 4px 0 rgba(255,255,255,.2); }
.paper-doll-figure.has-body .paper-chest { display: block !important; left: 13px; top: 32px; width: 34px; height: 31px; background: var(--armor-body, #a85d3b); border: 2px solid rgba(0,0,0,.3); border-radius: 5px 5px 2px 2px; box-shadow: inset 5px 0 rgba(255,255,255,.2); }
.paper-doll-figure.has-legs .paper-greaves { display: block !important; left: 16px; top: 59px; width: 29px; height: 28px; background: var(--armor-legs, #a85d3b); border-bottom: 2px solid rgba(0,0,0,.3); }
.paper-doll-figure.has-accessory .paper-accessory { display: block !important; right: 2px; top: 40px; color: #8ee9df; font-style: normal; font-size: 15px; text-shadow: 0 0 7px rgba(110,231,216,.75); }
.paper-doll-gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 5px; }
.paper-doll-gear span { overflow: hidden; min-width: 0; padding: 5px 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; color: #7e8da1; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.paper-doll-gear span.equipped { border-color: rgba(212,139,86,.42); color: #f2d4a6; background: rgba(186,99,58,.12); }

.guest-card { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 20px; width: min(580px, calc(100% - 32px)); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 12px 11px 16px; }
.guest-card b, .guest-card span { display: block; }
.guest-card b { font-size: 13px; margin-bottom: 2px; }
.guest-card span { font-size: 11px; color: var(--muted); }
.primary { border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 9px 16px; font-weight: 750; font-size: 12px; cursor: pointer; color: #071312; background: linear-gradient(135deg, #8df3d4, #54d8be); box-shadow: 0 6px 20px rgba(48,205,177,.22), inset 0 1px rgba(255,255,255,.7); }
.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary:active { transform: translateY(0); }
.primary:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.wide { width: 100%; padding: 11px; }
.quiet, .icon-button { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 7px; cursor: pointer; }
.quiet { padding: 5px 9px; color: var(--muted); font-size: 11px; }
.quiet:hover, .icon-button:hover { background: rgba(255,255,255,.11); color: white; }
.icon-button { width: 28px; height: 28px; font-weight: bold; }
.player-card { position: fixed; z-index: 6; left: 18px; bottom: 18px; height: 38px; padding: 5px 6px 5px 12px; border-radius: 10px; display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.player-card b { color: var(--cyan); }
.control-notice { position: fixed; z-index: 10; left: 50%; bottom: 79px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 11px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.control-notice b { color: var(--gold); }
.control-notice .primary { padding: 7px 11px; }

.quest-card { position: fixed; z-index: 6; right: 260px; left: auto; top: 82px; width: 280px; min-width: 0; padding: 8px 10px; border-radius: 13px; transform: scale(var(--ui-scale)); transform-origin: top right; }
.quest-card.completed { border-color: rgba(110,231,216,.35); }
.quest-heading { display: flex; align-items: center; justify-content: space-between; padding-right: 22px; }
.quest-heading small { color: var(--cyan); font-size: 9px; letter-spacing: .1em; }
.quest-heading span { color: var(--muted); font-size: 9px; }
.quest-card > b { display: block; margin-top: 4px; font-size: 14px; }
.quest-card p { min-height: 28px; margin: 4px 0 8px; color: #b7c3d1; font-size: 10px; line-height: 1.4; }
.quest-close { position: absolute; right: 7px; top: 6px; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.quest-close:hover { background: rgba(255,255,255,.08); color: white; }
.quest-progress { height: 4px; margin-right: 88px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.quest-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #53cdb7, #8df3d4); transition: width .2s ease; }
.quest-action { position: absolute; right: 10px; bottom: 8px; min-width: 76px; padding: 5px 7px; border: 1px solid rgba(110,231,216,.28); border-radius: 7px; background: rgba(110,231,216,.12); color: var(--cyan); font-size: 9px; font-weight: 750; cursor: pointer; touch-action: manipulation; }
.quest-action:hover { background: rgba(110,231,216,.2); }

.npc-dialogue { position: fixed; z-index: 12; left: 50%; bottom: 88px; transform: translateX(-50%); width: min(560px, calc(100% - 36px)); min-height: 132px; padding: 14px; border-radius: 16px; display: grid; grid-template-columns: 84px 1fr; gap: 14px; border-color: rgba(255,209,102,.25); }
.npc-portrait { position: relative; min-height: 102px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: radial-gradient(circle at 50% 25%, rgba(110,231,216,.22), transparent 38%), linear-gradient(#263c51 0 58%, #172536 58%); }
.npc-portrait::before { content: ""; position: absolute; left: 27px; top: 21px; width: 31px; height: 31px; border-radius: 5px; background: #c98f68; box-shadow: -4px -5px 0 #38404c, 4px -5px 0 #38404c; }
.npc-portrait::after { content: ""; position: absolute; left: 20px; top: 51px; width: 44px; height: 50px; border-radius: 7px 7px 2px 2px; background: #287d7b; box-shadow: inset 8px 0 rgba(124,231,206,.18); }
.npc-portrait i { position: absolute; z-index: 2; left: 18px; top: 13px; width: 48px; height: 11px; border-radius: 3px; background: #d39a4e; box-shadow: 0 5px #785232; }
.npc-portrait b { position: absolute; z-index: 3; left: 37px; top: 35px; width: 4px; height: 4px; background: #18222e; box-shadow: 11px 0 #18222e; }
.npc-portrait span { position: absolute; z-index: 3; left: 22px; top: 57px; width: 41px; height: 8px; transform: rotate(-5deg); background: #f0ba55; box-shadow: 0 2px rgba(71,43,23,.35); }
.npc-dialogue-body { min-width: 0; display: flex; flex-direction: column; }
.npc-dialogue-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.npc-dialogue-heading b, .npc-dialogue-heading small { display: block; }
.npc-dialogue-heading b { color: #fff0c4; font-size: 14px; }
.npc-dialogue-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.npc-dialogue-heading > span { color: #9aabba; font-size: 9px; }
.npc-dialogue-body p { flex: 1; min-height: 38px; margin: 9px 0 10px; color: #d5dee8; font-size: 12px; line-height: 1.65; }
.npc-dialogue-actions { display: flex; justify-content: flex-end; gap: 7px; }
.npc-dialogue-actions .primary { padding: 7px 13px; }

/* Hotbar: Terraria desktop style — top-left, no container panel, pixel-art slot backs. */
.hotbar {
  position: fixed;
  z-index: 22;
  left: 20px;
  top: 20px;
  display: flex;
  gap: var(--terraria-slot-gap);
  image-rendering: pixelated;
}
.hotbar.read-only .slot { opacity: .58; cursor: default; }

.slot {
  flex: 0 0 var(--terraria-slot);
  width: var(--terraria-slot);
  height: var(--terraria-slot);
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  border: 0;
  border-radius: 0;
  background: url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.28));
  image-rendering: pixelated;
}
.slot:hover { filter: brightness(1.13) drop-shadow(1px 2px 0 rgba(0,0,0,.28)); }
.slot.selected {
  background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png");
  filter: brightness(1.08) drop-shadow(0 0 3px rgba(255,224,103,.75));
}
.slot.empty { opacity: .76; }
.slot-key { position: absolute; left: 5px; top: 3px; color: #eef7ff; font-size: 10px; font-weight: 700; text-shadow: 1px 1px 1px #111; }
.slot-count { position: absolute; right: 5px; bottom: 3px; color: #fff; font-weight: 800; font-size: 12px; line-height: 1; text-shadow: 1px 1px 2px #000, -1px -1px #000; }
.item-icon { position: absolute; inset: 7px; display: grid; place-items: center; border: 0; border-radius: 0; color: #fff; font-family: serif; font-size: 25px; font-style: normal; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.62)); }
.item-icon.block { border: 1px solid rgba(22,16,12,.42); border-radius: 2px; box-shadow: inset 1px 1px rgba(255,255,255,.2), inset -1px -1px rgba(0,0,0,.2); }
.item-icon img { display: block; max-width: 100%; max-height: 100%; image-rendering: pixelated; }

.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-heading small, .panel-heading b { display: block; }
.panel-heading small { color: var(--cyan); font-size: 9px; letter-spacing: .14em; }
.panel-heading b { margin-top: 2px; font-size: 17px; }
.appearance-panel { position: fixed; z-index: 8; left: 18px; top: 96px; width: 360px; border-radius: 15px; padding: 14px; }
.appearance-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.appearance-body { display: flex; gap: 12px; align-items: flex-start; }
.appearance-preview-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#appearancePreview { width: 120px; height: 168px; border-radius: 10px; background: linear-gradient(rgba(96,140,190,.25), rgba(20,32,54,.45)); border: 1px solid var(--line); image-rendering: pixelated; }
#appearanceRandom { font-size: 10px; padding: 5px 10px; }
.appearance-controls { flex: 1; min-width: 0; }
.hair-picker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #c9d3df; font-size: 11px; }
.hair-picker-nav { display: flex; align-items: center; gap: 7px; }
.hair-picker-nav button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.05); color: #cfd9e5; font-size: 10px; cursor: pointer; }
.hair-picker-nav button:hover { background: rgba(255,255,255,.12); }
.hair-picker-nav b { min-width: 22px; text-align: center; color: var(--cyan); font-size: 13px; }
.color-categories { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.color-swatch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.04); color: #cfd9e5; font-size: 11px; cursor: pointer; text-align: left; }
.color-swatch:hover { background: rgba(255,255,255,.09); }
.color-swatch.open { border-color: var(--cyan); background: rgba(110,231,216,.08); }
.color-swatch i { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); flex: none; }
.hsl-rows { padding: 6px 8px 8px 34px; display: flex; flex-direction: column; gap: 5px; }
.hsl-rows label { display: grid; grid-template-columns: 14px 1fr 30px; align-items: center; gap: 7px; font-size: 9px; color: var(--muted); }
.hsl-rows label output { text-align: right; color: #cfd9e5; }
.hsl-rows input[type="range"] { width: 100%; height: 14px; -webkit-appearance: none; appearance: none; border-radius: 4px; outline: none; }
.hsl-rows input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 14px; border-radius: 3px; background: #fff; border: 1px solid rgba(0,0,0,.5); cursor: pointer; }
.hsl-rows input[data-ch="h"] { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.hsl-rows input[data-ch="s"] { background: linear-gradient(90deg, #888, var(--hsl-pure, #f00)); }
.hsl-rows input[data-ch="l"] { background: linear-gradient(90deg, #000, var(--hsl-pure, #f00) 50%, #fff); }

.chat { position: fixed; z-index: 7; left: 18px; bottom: 67px; width: min(370px, calc(100vw - 36px)); padding: 8px; border-radius: 11px; background: rgba(7,12,21,.58); pointer-events: none; }
.chat-log { height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; font-size: 11px; text-shadow: 0 1px 2px #000; }
.chat-line { animation: chat-in .18s ease-out; }
.chat-line b { color: var(--cyan); margin-right: 5px; }
.chat-line.system { color: #d6bd79; font-style: italic; }
.chat-form { display: flex; margin-top: 7px; gap: 5px; pointer-events: auto; }
.chat-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.4); color: white; outline: 0; padding: 7px 8px; font-size: 11px; user-select: text; }
.chat-form input:focus { border-color: var(--cyan); }
.chat-form button { border: 0; border-radius: 7px; background: var(--cyan); color: #09201d; font-weight: bold; font-size: 10px; }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } }

.modal { border: 0; padding: 0; background: transparent; color: var(--text); max-width: none; max-height: none; }
.modal::backdrop { background: rgba(1,5,12,.7); backdrop-filter: blur(7px); }
.modal-card { position: relative; width: min(390px, calc(100vw - 28px)); padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(25,36,55,.98), rgba(9,16,29,.98)); box-shadow: 0 30px 90px #000; text-align: center; }
.modal-card h1 { margin: 5px 0 7px; font-size: 24px; }
.modal-card > small { color: var(--cyan); font-size: 8px; letter-spacing: .22em; }
.modal-card > p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 18px; }
.modal-emblem { color: var(--cyan); font-size: 31px; line-height: 1; margin-bottom: 3px; text-shadow: 0 0 24px rgba(110,231,216,.8); }
.modal-close { position: absolute; right: 12px; top: 12px; border: 0; border-radius: 7px; width: 30px; height: 30px; color: var(--muted); background: rgba(255,255,255,.06); cursor: pointer; }
.modal-card label { display: block; margin: 10px 0; text-align: left; color: #b7c3d1; font-size: 10px; }
.modal-card label input { display: block; width: 100%; margin-top: 5px; padding: 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0,0,0,.28); color: white; outline: 0; user-select: text; }
.modal-card label input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(110,231,216,.08); }
.form-error { min-height: 17px; color: #ff8997 !important; margin: 4px 0 6px !important; }
.text-button { border: 0; background: none; color: var(--cyan); font-size: 11px; cursor: pointer; margin: 12px 0 4px; }
.privacy { font-size: 9px !important; margin: 3px 0 0 !important; }
.help-grid { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; text-align: left; margin: 20px 0; }
.help-grid span { text-align: right; }
.help-grid p { margin: 0; color: #c2cbd6; font-size: 11px; }
kbd { display: inline-block; min-width: 27px; margin-left: 3px; padding: 5px 6px; border: 1px solid rgba(255,255,255,.22); border-bottom-width: 3px; border-radius: 5px; background: rgba(255,255,255,.08); color: white; font: 9px inherit; text-align: center; }

.mobile-controls { position: fixed; inset: auto 12px 14px; z-index: 8; justify-content: space-between; pointer-events: none; }
.mobile-move, .mobile-actions { position: relative; display: flex; gap: 7px; pointer-events: auto; align-items: flex-end; }
.mobile-controls button { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(8,16,29,.67); backdrop-filter: blur(8px); font-weight: bold; font-size: 18px; touch-action: none; }
.mobile-controls button:active, .mobile-controls button.pressed { background: rgba(110,231,216,.35); border-color: var(--cyan); }
.mobile-actions button[data-action="interact"] { position: absolute; right: 0; bottom: 61px; border-color: rgba(255,209,102,.4); background: rgba(88,64,34,.78); }
.mobile-zoom { position: fixed; z-index: 8; right: 8px; top: 174px; display: none; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,16,29,.72); backdrop-filter: blur(8px); }
.mobile-zoom button { width: 36px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: white; font-size: 20px; line-height: 1; touch-action: none; }
.mobile-zoom button:active { background: rgba(110,231,216,.3); color: var(--cyan); }
.mobile-zoom output { min-width: 43px; color: #dce7f3; font-size: 10px; text-align: center; }
.aim-hint { position: fixed; z-index: 20; pointer-events: none; padding: 5px 7px; border-radius: 6px; background: rgba(3,8,17,.8); border: 1px solid var(--line); color: #dbe4ef; font-size: 10px; }

@media (pointer: coarse), (max-width: 760px) {
  .topbar { left: 8px; right: 8px; top: 7px; min-height: 48px; }
  .brand small { display: none; }
  .server-state #connectionText, .server-state #viewerCount, .server-state .divider { display: none; }
  .roadmap-link { width: 29px; padding: 0; justify-content: center; }
  .roadmap-link span { display: none; }
  .roadmap-link b { display: inline; }
  .right-rail { right: 8px; top: 63px; width: 146px; }
  .minimap-shell { height: 76px; }
  .online { display: none; }
  .paper-doll { display: none; }
  .vitals { left: 8px; top: 63px; width: 155px; }
  .guest-card { bottom: 12px; }
  .guest-card span { display: none; }
  .player-card { display: none !important; }
  .control-notice { top: 164px; bottom: auto; max-width: calc(100% - 16px); }
  .hotbar { left: 6px; top: 5px; width: auto; max-width: calc(100vw - 12px); overflow-x: auto; justify-content: flex-start; }
  .quest-card { right: 12px; left: auto; top: 226px; transform: none; width: min(280px, calc(100vw - 24px)); min-width: 0; padding: 9px 10px 9px; }
  .quest-card.observer { top: 270px; }
  .quest-card > b { font-size: 12px; }
  .quest-card p { min-height: 0; margin-bottom: 7px; font-size: 9px; }
  .slot { flex: 0 0 43px; width: 43px; height: 43px; }
  .npc-dialogue { bottom: 142px; width: calc(100% - 16px); min-height: 118px; grid-template-columns: 62px 1fr; gap: 10px; padding: 10px; }
  .npc-portrait { min-height: 88px; }
  .npc-portrait::before { left: 18px; top: 20px; }
  .npc-portrait::after { left: 13px; top: 50px; width: 40px; }
  .npc-portrait i { left: 9px; }
  .npc-portrait b { left: 28px; }
  .npc-portrait span { left: 14px; width: 38px; }
  .npc-dialogue-body p { font-size: 11px; }
  .chat { left: 8px; bottom: 78px; width: calc(100% - 16px); }
  .chat-log { height: 55px; }
  .mobile-controls:not(.hidden) { display: flex; }
  .mobile-zoom { display: flex; }

  .equipment-slot { min-height: 43px; padding: 5px 3px; font-size: 8px; }
  .equipment-slot b { font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
  .appearance-panel { inset: 62px 8px auto; width: auto; }
}

@media (max-height: 600px) {
  .right-rail { display: none; }
  .vitals { top: 77px; }
}

/*
 * Terraria Web Lab interface
 *
 * The gameplay DOM remains accessible HTML, but the in-game arrangement uses
 * the original desktop game's spatial grammar: hotbar at the upper left,
 * health just left of the minimap, map in the upper right, inventory in a
 * 10×5 grid at the upper left and the equipment paper doll on the right.
 * Reference PNGs live only in the local
 * development-reference directory; all mechanics remain Web implementation.
 */
:root {
  --terraria-blue: #496c9c;
  --terraria-blue-dark: #233a65;
  --terraria-blue-light: #7398c9;
  --terraria-gold: #ffd34f;
  --terraria-text: #fff7d0;
  --terraria-shadow: rgba(0, 0, 0, .72);
  /* DrawInventory uses Inventory_Back (52 px) at inventoryScale .85 and a
   * 56 px stride. Rounded here to 44 px cells with a 4 px gutter. */
  --terraria-slot: 44px;
  --terraria-slot-gap: 4px;
  --terraria-grid-width: 476px;
}

body {
  color: var(--terraria-text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  text-shadow: 1px 1px 0 var(--terraria-shadow);
}

button, input { text-shadow: none; }

.terraria-topbar {
  position: fixed;
  z-index: 24;
  left: auto;
  right: 13px;
  top: auto;
  bottom: 12px;
  min-height: 0;
  padding: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.terraria-topbar .server-state,
.terraria-topbar .world-shortcuts {
  display: flex;
  align-items: center;
  gap: 5px;
}

.terraria-topbar .server-state {
  padding: 4px 7px;
  color: rgba(255, 247, 208, .82);
  font-size: 10px;
  background: rgba(21, 35, 61, .58);
  border: 1px solid rgba(138, 180, 231, .34);
}

.terraria-topbar .server-state i { width: 7px; height: 7px; }
.terraria-topbar .divider { height: 11px; background: rgba(255,255,255,.28); }
.terraria-topbar .sound-toggle,
.terraria-topbar .roadmap-link {
  width: 25px;
  min-height: 25px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(174, 203, 236, .55);
  border-radius: 0;
  background: linear-gradient(#6e92c0, #395b8b);
  color: #fff8d5;
  box-shadow: inset 1px 1px rgba(255,255,255,.3), inset -1px -1px rgba(0,0,0,.38);
}
.terraria-topbar .roadmap-link span { display: none; }
.terraria-topbar .roadmap-link b { display: inline; }
.terraria-topbar .sound-toggle:hover,
.terraria-topbar .roadmap-link:hover { filter: brightness(1.16); background: linear-gradient(#89aed8, #486d9e); }



.selected-item-label {
  position: fixed;
  z-index: 22;
  left: 23px;
  top: calc(21px + var(--terraria-slot));
  max-width: 420px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,.55);
  color: #fff6c4;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

.vitals {
  position: fixed;
  z-index: 22;
  right: 276px;
  left: auto;
  top: 14px;
  width: 184px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}
.vital-label { justify-content: flex-end; gap: 6px; margin: 0 1px 2px; color: #fff2d0; font-size: 10px; }
.vital-label b { color: #ffe7e7; font-size: 10px; }
.heart-row { display: flex; justify-content: flex-end; min-height: 38px; gap: 0; }
.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;
}
.health-track { display: none; }
.defense-readout { justify-content: flex-end; margin: 3px 2px 0; color: #e8f1ff; font-size: 11px; }
.defense-readout b { color: #fff; }

.right-rail {
  position: fixed;
  z-index: 22;
  right: 8px;
  top: 7px;
  width: 256px;
  display: block;
  pointer-events: none;
}
.minimap-shell {
  position: relative;
  width: 256px;
  height: 264px;
  padding: 0;
  overflow: hidden;
  border: 0;
  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);
  image-rendering: pixelated;
  pointer-events: auto;
}
#minimap {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 240px;
  height: 229px;
  border-radius: 0;
  opacity: .94;
  image-rendering: pixelated;
}
#worldClock {
  right: 12px;
  bottom: 13px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff7d2;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #1d2741;
}
.minimap-tools { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 2px; }
.minimap-tools button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #1d3457;
  background: rgba(218,235,255,.82);
  font-size: 14px;
  font-weight: 900;
  line-height: 15px;
  cursor: pointer;
}
.minimap-tools button:hover { background: #fff4b1; }
.minimap-tools button[data-zoom="in"],
.minimap-tools button[data-zoom="out"] {
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.minimap-tools button[data-zoom="in"] { background-image: url("/assets/assets/reference/terraria/ui/MinimapButton_ZoomIn.png"); }
.minimap-tools button[data-zoom="out"] { background-image: url("/assets/assets/reference/terraria/ui/MinimapButton_ZoomOut.png"); }
.online {
  display: none;
  pointer-events: auto;
  border: 1px solid rgba(164,194,234,.35);
  border-radius: 0;
  background: rgba(36,59,99,.72);
}

.settings-button {
  position: fixed;
  z-index: 25;
  left: 14px;
  bottom: 13px;
  width: 36px;
  height: 35px;
  padding: 0;
  border: 1px solid #1d3258;
  border-radius: 0;
  color: #fff8cf;
  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);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.settings-button:hover { filter: brightness(1.14); }
.settings-panel {
  position: fixed;
  z-index: 30;
  left: 14px;
  bottom: 54px;
  width: 214px;
  padding: 7px;
  border: 2px solid #183158;
  border-radius: 0;
  background: rgba(53,85,137,.95);
  box-shadow: inset 1px 1px #99b8de, inset -2px -2px #213f70, 2px 3px 0 rgba(0,0,0,.48);
}
.settings-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 3px 6px; color: #fff5bc; font-size: 17px; }
.settings-heading button { width: 22px; height: 21px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 19px; cursor: pointer; }
.settings-panel > button:not(.settings-heading button) {
  display: flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  margin: 3px 0;
  padding: 5px 7px;
  border: 1px solid rgba(190,217,248,.55);
  border-radius: 0;
  color: #fff;
  background: linear-gradient(#7196c6, #3f6598);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.settings-panel > button:hover { filter: brightness(1.13); }
.settings-panel > button span { color: #ffe16e; font-weight: 700; }

/* Touch actions use the supplied radial control skin while retaining the
 * semantic button labels for accessibility and the existing input handlers. */
.mobile-controls 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;
}
.mobile-controls button:active,
.mobile-controls button.pressed { border-color: transparent; filter: brightness(1.22) saturate(1.18); }
.mobile-controls .mobile-actions button[data-action="interact"] {
  background: transparent url("/assets/assets/reference/terraria/ui/HotbarRadial_0.png") center / 100% 100% no-repeat;
}
.mobile-actions button[data-action="place"] {
  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%;
  padding-top: 24px;
  font-size: 10px;
}

.craft-panel {
  position: fixed;
  z-index: 29;
  left: 20px;
  top: 0;
  width: min(var(--terraria-grid-width), calc(100vw - 286px));
  max-height: calc(100vh - 8px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  scrollbar-color: #a9c6ea rgba(31,52,87,.45);
}
.inventory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: var(--terraria-grid-width);
  min-height: 20px;
  /* Source title is at x=40 while the first item slot starts at x=20. */
  padding: 0 0 1px 20px;
}
.inventory-heading small,
.inventory-heading b { display: block; }
.inventory-heading small { display: none; }
.inventory-heading b { color: #fff5bd; font-size: 18px; line-height: 1; }
.inventory-close {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #294b7c;
  border-radius: 0;
  color: #fff7c7;
  background: linear-gradient(#7297c9, #385a8c);
  font-size: 19px;
  line-height: 19px;
  cursor: pointer;
}
.inventory-layout { display: block; width: var(--terraria-grid-width); }
.inventory-main { min-width: 0; }
.inventory-section-title {
  margin: 3px 0 2px 3px;
  color: #fff6c9;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #17325b;
}
.inventory-section-title small { color: #d1e5ff; font-size: 10px; font-weight: 400; }
.inventory-main > .inventory-section-title:first-child { display: none; }
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(10, var(--terraria-slot));
  grid-auto-rows: var(--terraria-slot);
  gap: var(--terraria-slot-gap);
  width: var(--terraria-grid-width);
}
.inv-item {
  touch-action: none;
  position: relative;
  width: var(--terraria-slot);
  min-height: var(--terraria-slot);
  height: var(--terraria-slot);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat;
  cursor: pointer;
  image-rendering: pixelated;
}
.inv-item.empty { min-height: var(--terraria-slot); background: url("/assets/assets/reference/terraria/ui/Inventory_Back.png") center / 100% 100% no-repeat; border: 0; opacity: .64; cursor: default; }
.inv-item.selected { border: 0; background-image: url("/assets/assets/reference/terraria/ui/Inventory_Back2.png"); box-shadow: none; filter: brightness(1.09) drop-shadow(0 0 3px rgba(255,225,101,.72)); }
.inv-item:hover:not(.empty) { filter: brightness(1.13); }
.inv-item > span:not(.inv-equip-action),
.inv-item > b { display: none; }
.inv-item .inventory-item-icon { position: absolute; inset: 7px; }
.inv-item .inventory-item-count { position: absolute; right: 5px; bottom: 3px; display: block; color: #fff; font-size: 12px; line-height: 1; text-shadow: 1px 1px 2px #000, -1px -1px #000; }
.inv-item button {
  right: 2px;
  bottom: 2px;
  min-width: 15px;
  height: 14px;
  padding: 0 2px;
  border: 1px solid #f6dd80;
  border-radius: 0;
  color: #263d63;
  background: #f8e18d;
  font-size: 8px;
  line-height: 11px;
}
.inv-item button:disabled { opacity: .42; }
.cursor-held-item {
  position: fixed;
  z-index: 1000;
  width: var(--terraria-slot, 44px);
  height: var(--terraria-slot, 44px);
  transform: translate(4px, 4px);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.cursor-held-item .inventory-item-icon { position: absolute; inset: 4px; }
.cursor-held-item .inventory-item-count {
  position: absolute; right: 3px; bottom: 2px;
  color: #fff; font-size: 12px; line-height: 1;
  text-shadow: 1px 1px 2px #000, -1px -1px #000;
}
.inventory-storage-row { display: flex; align-items: center; gap: 1px; width: 430px; margin: 6px 0 5px 2px; color: #fff3bf; font-size: 11px; }
.inventory-storage-row span { margin: 0 4px 0 2px; }
.inventory-storage-row i { width: 24px; height: 24px; background: url("/assets/assets/reference/terraria/ui/DisplaySlots_0.png") center / 100% 100% no-repeat; opacity: .88; }
.recipe-title { margin-top: 4px; }
.recipe-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: var(--terraria-grid-width); padding: 1px 0 10px 2px; }
.recipe {
  min-height: 43px;
  padding: 4px 4px 4px 7px;
  border: 1px solid rgba(167,202,240,.32);
  border-radius: 0;
  background: rgba(48,82,133,.76);
  box-shadow: inset 1px 1px rgba(255,255,255,.12), inset -1px -1px rgba(5,16,39,.25);
}
.recipe.can { border-color: rgba(255,222,112,.75); background: rgba(74,106,159,.87); }
.recipe.station-missing { border-color: rgba(221,194,103,.6); }
.recipe b { color: #fff6ca; font-size: 11px; }
.recipe small { max-width: 178px; overflow: hidden; color: #d2e2fa; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.recipe .station-requirement { color: #ffe189; }
.recipe .station-requirement.ready { color: #c0f2b3; }
.recipe button { padding: 4px 6px; border: 1px solid #f4df8d; border-radius: 0; background: #f0d575; color: #26395c; font-size: 9px; }

.paper-doll {
  position: fixed;
  top: 174px;
  right: 20px;
  width: 246px;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 366px;
  padding: 5px 7px 7px;
  border: 2px solid #1f416f;
  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);
}
.paper-doll-heading { margin: 0 0 1px; color: #fff5bf; font-size: 16px; letter-spacing: 0; text-shadow: 1px 1px 0 #19355c; }
.paper-doll-heading b { color: #d6e7ff; font-size: 10px; }
.paper-doll-stage {
  display: grid;
  place-items: center;
  height: 145px;
  margin: 0 7px 4px;
  background: url("/assets/assets/reference/terraria/ui/PlayerBackground.png") center / 118px 116px no-repeat;
  image-rendering: pixelated;
}
.paper-doll-figure {
  width: 80px;
  height: 112px;
  margin: 0;
  background: url("/assets/assets/reference/terraria/player/Player_0_0.png") top center / 80px auto no-repeat;
  filter: drop-shadow(2px 3px 1px rgba(0,0,0,.48));
  image-rendering: pixelated;
}
.paper-doll-figure i { display: none !important; }
.paper-doll-gear { display: none; }
.equipment-bar { display: grid; grid-template-columns: repeat(5, 44px); gap: 0; justify-content: center; margin: 0; }
.equipment-slot {
  position: relative;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #d8e9ff;
  background: url("/assets/assets/reference/terraria/ui/DisplaySlots_0.png") center / 100% 100% no-repeat;
  font-size: 0;
  cursor: default;
}
.equipment-slot > span,
.equipment-slot > b { display: none; }
.equipment-slot .equipment-item-icon { position: absolute; inset: 7px; }
.equipment-slot.active { border: 0; box-shadow: none; background-image: url("/assets/assets/reference/terraria/ui/DisplaySlots_1.png"); cursor: pointer; }
.equipment-slot.active:hover { filter: brightness(1.16); }

.player-card {
  left: auto;
  right: 276px;
  bottom: 14px;
  height: auto;
  padding: 4px 6px;
  border: 1px solid rgba(161,195,237,.38);
  border-radius: 0;
  background: rgba(41,67,111,.72);
  box-shadow: 1px 2px 0 rgba(0,0,0,.35);
}
.player-card b { color: #fff1a4; }
.player-card .quiet, .player-card .icon-button { border-radius: 0; }

.chat {
  z-index: 21;
  left: 13px;
  bottom: 55px;
  border: 0;
  border-radius: 0;
  background: rgba(15,27,52,.65);
  box-shadow: none;
  backdrop-filter: none;
}
.chat-log { text-shadow: 1px 1px 0 #000; }
.chat-line { padding: 1px 5px; background: rgba(0,0,0,.35); border-radius: 3px; }
.chat-form input, .chat-form button { border-radius: 0; }
.chat-form input { background: rgba(0,0,0,.55); }
.quest-card {
  z-index: 23;
  right: 13px;
  left: auto;
  top: 280px;
  transform: none;
  width: 310px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(168,202,238,.48);
  border-radius: 0;
  background: rgba(36,61,104,.8);
  box-shadow: 1px 2px 0 rgba(0,0,0,.35);
  backdrop-filter: none;
}
.npc-dialogue { border-radius: 0; background: rgba(37,62,104,.94); backdrop-filter: none; }

/* The reference UI replaces the hotbar while the full Inventory panel is
 * open; modern browser engines support this selector and it avoids a second
 * overlapping copy of slots on top of the 10 × 5 grid. */
body:has(#craftPanel:not(.hidden)) .hotbar,
body:has(#craftPanel:not(.hidden)) .selected-item-label { display: none !important; }
body:not(:has(#craftPanel:not(.hidden))) .paper-doll { display: none !important; }

@media (max-width: 1080px) {
  .craft-panel { width: min(var(--terraria-grid-width), calc(100vw - 20px)); }
  .right-rail { transform: scale(.82); transform-origin: top right; }
  .vitals { right: 220px; transform: scale(.88); transform-origin: top right; }
  .player-card { right: 220px; }
  .paper-doll { right: 12px; }
}

@media (pointer: coarse), (max-width: 760px) {
  :root { --terraria-slot: 42px; --terraria-slot-gap: 0px; --terraria-grid-width: 420px; }
  .terraria-topbar { right: 7px; bottom: 7px; }
  .terraria-topbar .server-state { display: none; }
  .terraria-topbar .world-shortcuts { gap: 3px; }
  .terraria-topbar .sound-toggle, .terraria-topbar .roadmap-link { width: 29px; min-height: 29px; }
  .hotbar { left: 6px; top: 5px; max-width: calc(100vw - 12px); overflow-x: auto; overscroll-behavior: contain; gap: 0; }
  .slot { flex-basis: var(--terraria-slot); }
  .slot-key { font-size: 8px; }
  .slot-count { font-size: 10px; }
  .item-icon { inset: 6px; font-size: 20px; }
  .selected-item-label { left: 7px; top: calc(5px + var(--terraria-slot)); max-width: 230px; font-size: 11px; }
  .right-rail { right: 4px; top: 4px; width: 144px; transform: none; }
  .minimap-shell { width: 144px; height: 149px; background-size: 100% 100%; }
  #minimap { left: 5px; top: 5px; width: 134px; height: 126px; }
  #worldClock { right: 7px; bottom: 7px; font-size: 9px; }
  .minimap-tools { left: 6px; bottom: 5px; grid-auto-flow: column; }
  .minimap-tools button { width: 15px; height: 15px; font-size: 12px; line-height: 12px; }
  .vitals { right: 149px; top: 52px; width: 115px; transform: none; }
  .vital-label { display: none; }
  .heart-row { min-height: 22px; }
  .heart-row i { width: 22px; height: 23px; }
  .defense-readout { margin-top: 0; font-size: 9px; }
  .online { display: none; }
  .quest-card { right: 6px; left: auto; top: calc(7px + var(--terraria-slot) + 18px); width: min(286px, calc(100vw - 155px)); padding: 6px 7px; }
  .quest-card p { display: none; }
  .quest-progress { margin-right: 70px; }
  .quest-action { right: 6px; bottom: 5px; min-width: 60px; font-size: 8px; }
  .craft-panel { inset: 55px 5px 72px; width: auto; max-height: none; padding: 0 0 8px; overflow: auto; }
  .inventory-heading { width: var(--terraria-grid-width); max-width: 100%; min-height: 27px; }
  .inventory-heading b { font-size: 18px; }
  .inventory-layout { display: block; width: var(--terraria-grid-width); max-width: 100%; }
  .inventory-main { width: var(--terraria-grid-width); max-width: 100%; }
  .inventory-section-title { font-size: 14px; }
  .inventory-grid { grid-template-columns: repeat(10, var(--terraria-slot)); grid-auto-rows: var(--terraria-slot); gap: var(--terraria-slot-gap); width: var(--terraria-grid-width); }
  .inv-item .inventory-item-icon { inset: 6px; }
  .inventory-storage-row { width: 400px; max-width: 100%; overflow: hidden; }
  .recipe-list { grid-template-columns: 1fr; width: 400px; max-width: 100%; }
  .recipe { min-height: 39px; }
  .paper-doll { position: static; display: grid; grid-template-columns: 1fr; width: 245px; min-height: 0; margin: 8px 0 0; }
  .paper-doll-stage { height: 116px; }
  .paper-doll-figure { transform: scale(.82); }
  .equipment-bar { grid-template-columns: repeat(5, 40px); }
  .equipment-slot { width: 40px; min-height: 40px; height: 40px; }
  .settings-button { left: 7px; bottom: 8px; width: 40px; height: 40px; }
  .settings-panel { left: 7px; bottom: 54px; width: 210px; }
  .player-card { display: none !important; }
  .chat { left: 6px; bottom: 74px; width: calc(100% - 12px); }
  .mobile-controls { z-index: 28; }
  .mobile-zoom { z-index: 28; right: 5px; top: 157px; }
}

/* B2 world selector */
.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, background .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 (blue stars) */
.mana-row { display: flex; gap: 1px; margin-top: 4px; }
.mana-row i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a4a8a;
  box-shadow: 0 0 2px rgba(100,180,255,.3);
}
.mana-row i.full {
  background: #5ca8ff;
  box-shadow: 0 0 3px rgba(100,180,255,.6);
}

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

/* UI scale setting */
.settings-scale { margin: 10px 0; padding-top: 8px; border-top: 1px solid rgba(164,209,255,.12); }
.settings-scale span { display: block; font-size: 12px; color: #a8bbd2; margin-bottom: 6px; }
.scale-group { display: flex; gap: 6px; }
.scale-group button {
  flex: 1; padding: 6px 4px; border: 1px solid rgba(164,209,255,.2); border-radius: 8px;
  background: rgba(255,255,255,.05); color: #eef7ff; font-size: 11px; cursor: pointer;
}
.scale-group button:hover, .scale-group button.active { border-color: #6ee7d8; background: rgba(110,231,216,.14); }

/* Inventory layout: inventory grid left, paper doll + equipment right */
.inventory-layout { display: grid !important; grid-template-columns: 1fr 230px; gap: 14px; width: auto !important; }
.inventory-main { min-width: 0; }
.paper-doll {
  display: flex !important;
  flex-direction: column;
  width: 220px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(164,209,255,.14);
  background: rgba(6,14,31,.5);
}
.paper-doll-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.paper-doll-heading b { color: #f1c47d; }
.paper-doll-stage { display: flex; justify-content: center; padding: 4px 0 8px; }
.paper-doll-figure { width: 58px; height: 90px; position: relative; }
.paper-doll-figure i { position: absolute; display: none; }
.paper-doll-figure .paper-hair { display: block; left: 15px; top: 0; width: 30px; height: 14px; background: var(--paper-hair, #5a3620); border-radius: 6px 6px 2px 2px; }
.paper-doll-figure .paper-head { display: block; left: 17px; top: 10px; width: 26px; height: 20px; background: #d4a76a; border-radius: 4px; }
.paper-doll-figure .paper-body { display: block; left: 15px; top: 28px; width: 30px; height: 32px; background: var(--paper-shirt, #7a5a3a); border-radius: 3px; }
.paper-doll-figure .paper-leg { display: block; top: 58px; width: 14px; height: 30px; background: #5a4a8a; }
.paper-doll-figure .paper-leg-left { left: 15px; }
.paper-doll-figure .paper-leg-right { left: 31px; }

/* Equipment bar: vertical list on the right side of paper doll */
.equipment-bar { display: flex !important; flex-direction: column; gap: 5px; margin-top: 6px; }
.equipment-slot {
  display: flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
  background: rgba(255,255,255,.04); color: var(--muted);
  font-size: 10px; cursor: pointer;
}
.equipment-slot:hover { border-color: rgba(110,231,216,.4); }
.equipment-slot.active { border-color: rgba(198,126,79,.52); background: rgba(186,99,58,.1); }
.equipment-slot b { color: #e7edf5; font-size: 11px; }
.equipment-slot .slot-icon { width: 18px; height: 18px; text-align: center; line-height: 18px; }

/* Gear list */
.paper-doll-gear { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.paper-doll-gear span { padding: 3px 6px; border: 1px solid rgba(255,255,255,.06); border-radius: 5px; color: #7e8da1; font-size: 9px; text-align: center; }
.paper-doll-gear span.equipped { border-color: rgba(212,139,86,.42); color: #f2d4a6; background: rgba(186,99,58,.12); }

/* Craft panel: wider to fit both columns */
.craft-panel { width: min(780px, calc(100vw - 36px)) !important; }