:root {
	color-scheme: dark;
	font-family: "Segoe UI", sans-serif;
	background: #101216;
	color: #e8e4d9;
}

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

#hud {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	gap: 1.25rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background: rgba(12, 14, 18, 0.82);
}

@keyframes friends-incoming-blink {
	0%,
	100% { opacity: 1; }
	50% { opacity: 0.35; }
}

#friends-toggle.has-incoming {
	animation: friends-incoming-blink 1s ease-in-out infinite;
	color: #e8c84a;
}

#overlay {
	position: fixed;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	background: #101216;
}

#overlay[hidden],
#hud[hidden] {
	display: none !important;
}

#settings-toggle {
	position: fixed;
	z-index: 4;
	top: 0.45rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid #3a4250;
	border-radius: 0.35rem;
	background: rgba(18, 22, 28, 0.92);
	color: #e8e4d9;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

#settings-toggle[hidden] {
	display: none !important;
}

#xp-gain-hud {
	position: fixed;
	z-index: 3;
	top: 2.85rem;
	right: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: stretch;
	width: min(220px, 46vw);
	pointer-events: none;
}

#xp-gain-hud[hidden] {
	display: none !important;
}

.xp-gain-row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.xp-gain-delta {
	flex: 0 0 auto;
	min-width: 1.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	text-align: right;
	color: #e8d9a0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
	font-variant-numeric: tabular-nums;
}

.xp-gain-icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
}

.xp-gain-track {
	flex: 1;
	height: 8px;
	min-width: 0;
	overflow: hidden;
}

.xp-gain-fill {
	height: 100%;
	background: linear-gradient(90deg, #6a7a40, #d4c48a);
	transition: width 0.2s ease-out;
}

#settings-panel {
	position: fixed;
	z-index: 5;
	top: 3.1rem;
	right: 0.75rem;
	width: min(18rem, calc(100vw - 1.5rem));
	padding: 0.75rem 0.9rem 1rem;
	border: 1px solid #3a4250;
	border-radius: 0.4rem;
	background: rgba(14, 17, 22, 0.96);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#settings-panel[hidden] {
	display: none !important;
}

#settings-panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}

#settings-panel h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

#settings-panel h3 {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #9aa3b2;
}

.settings-group+.settings-group {
	margin-top: 0.85rem;
}

.settings-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.settings-options button {
	flex: 1 1 auto;
	min-width: 4.5rem;
	padding: 0.35rem 0.55rem;
	border: 1px solid #3a4250;
	border-radius: 0.3rem;
	background: #1a2029;
	color: #c8cdd6;
	cursor: pointer;
}

.settings-options button.active {
	border-color: #7a91b8;
	background: #2a3648;
	color: #f0f2f6;
}

#toast-stack {
	position: fixed;
	top: 3.4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 25;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	pointer-events: none;
	max-width: min(440px, 92vw);
	width: max-content;
}

#world-tooltip {
	position: fixed;
	z-index: 11;
	pointer-events: none;
	max-width: 14rem;
	padding: 0.3rem 0.5rem;
	background: rgba(12, 14, 18, 0.92);
	border: 1px solid #3a4250;
	color: #e8e4d9;
	font-size: 0.8rem;
	line-height: 1.25;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

#world-tooltip[hidden] {
	display: none !important;
}

.toast {
	box-sizing: border-box;
	width: 100%;
	background: rgba(12, 14, 18, 0.94);
	border: 1px solid #4a5568;
	padding: 0.5rem 0.9rem;
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: center;
	color: #f0ebe0;
	white-space: pre-line;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: auto;
}

.toast-action-row {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 0.55rem;
}

.toast-action {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.25rem 0.7rem;
	border: 1px solid #5a6578;
	background: #1c2230;
	color: #e8e4d9;
	cursor: pointer;
}

.toast-action:hover {
	border-color: #8a93a5;
}

#trade-backdrop {
	z-index: 20;
	/* Dim only — bag and other HUD must stay clickable while trading. */
	pointer-events: none;
}

#trade-panel {
	position: fixed;
	z-index: 21;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, 94vw);
	height: min(70vh, 520px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(16, 18, 22, 0.96);
	border: 1px solid #3a4250;
	padding: 0.75rem 1rem 1rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

#bag-panel.trade-bag-raised {
	z-index: 23;
}

#trade-panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	flex: 0 0 auto;
}

#trade-panel h2 {
	margin: 0;
	font-size: 1.1rem;
}

.trade-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	flex: 1 1 auto;
	min-height: 0;
}

.trade-column {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.trade-column h3 {
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #c8c2b4;
	flex: 0 0 auto;
}

.trade-offer-grid {
	flex: 1 1 auto;
	min-height: 8rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-content: flex-start;
	padding: 0.4rem;
	border: 1px solid #2e3542;
	background: rgba(8, 10, 14, 0.55);
	overflow: auto;
}

.trade-offer-grid > .hint {
	margin: 0;
	width: 100%;
}

#trade-status {
	flex: 0 0 auto;
	margin: 0.5rem 0 0;
}

.trade-actions {
	display: flex;
	gap: 0.6rem;
	justify-content: flex-end;
	margin-top: 0.75rem;
	flex: 0 0 auto;
}

#trade-accept.active {
	background: #2a4a32;
	border-color: #4a8a58;
}

#trade-accept:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@keyframes trade-flash-add {
	0%,
	100% { box-shadow: inset 0 0 0 2px transparent; background-color: transparent; }
	20%,
	60% { box-shadow: inset 0 0 0 2px #4caf70; background-color: rgba(50, 140, 80, 0.35); }
}

@keyframes trade-flash-remove {
	0%,
	100% { box-shadow: inset 0 0 0 2px transparent; background-color: transparent; }
	20%,
	60% { box-shadow: inset 0 0 0 2px #d45a5a; background-color: rgba(160, 40, 40, 0.4); }
}

@keyframes trade-flash-remove-out {
	0% { box-shadow: inset 0 0 0 2px transparent; background-color: transparent; opacity: 1; }
	20%,
	60% { box-shadow: inset 0 0 0 2px #d45a5a; background-color: rgba(160, 40, 40, 0.4); opacity: 1; }
	100% { box-shadow: inset 0 0 0 2px transparent; background-color: transparent; opacity: 0; }
}

.item-slot.trade-flash-add {
	animation: trade-flash-add 0.7s ease-in-out;
}

.item-slot.trade-flash-remove {
	animation: trade-flash-remove 0.7s ease-in-out;
}

.item-slot.trade-flash-remove.trade-flash-ghost {
	animation: trade-flash-remove-out 0.7s ease-in-out forwards;
	pointer-events: none;
}

#trade-qty-backdrop {
	z-index: 24;
	pointer-events: auto;
}

#trade-qty-panel {
	position: fixed;
	z-index: 25;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(320px, 92vw);
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
	pointer-events: auto;
}

#trade-qty-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.toast.toast-visible {
	opacity: 1;
	transform: translateY(0);
}

.toast.toast-leaving {
	opacity: 0;
	transform: translateY(-4px);
}

.toast.toast-persistent {
	border-color: #c9a227;
	background: rgba(28, 22, 10, 0.96);
	color: #ffe9a8;
}

.panel {
	width: min(420px, 92vw);
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 1.25rem;
}

#character-list {
	margin: 0.75rem 0 1rem;
	max-height: min(40vh, 20rem);
	overflow: auto;
}

#create-character-open {
	width: 100%;
	margin-top: 0.25rem;
}

#create-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, 94vw);
	max-height: min(92vh, 44rem);
	overflow: auto;
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid #3a4250;
	border-radius: 0.4rem;
	background: rgba(18, 22, 28, 0.98);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

#create-panel[hidden] {
	display: none !important;
}

#create-panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

#create-panel h2 {
	margin: 0;
	font-size: 1.1rem;
}

#create-panel label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0.5rem 0;
}

.create-tabs {
	display: flex;
	gap: 0;
	margin: 0.35rem 0 0.75rem;
	border-bottom: 1px solid #2c3340;
}

.create-tab {
	flex: 1 1 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #9aa3b2;
	padding: 0.5rem 0.4rem;
}

.create-tab.active {
	color: #e8e4d9;
	background: #222833;
	box-shadow: inset 0 -2px 0 #6a8cbf;
}

.create-clothing {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 0.65rem 0.75rem;
	align-items: start;
}

.create-clothing canvas {
	width: 80px;
	height: 96px;
	image-rendering: pixelated;
	background: #0e1116;
	border: 1px solid #2c3340;
}

.create-clothing-fields {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.create-dye-fieldset {
	margin: 0.35rem 0 0;
	padding: 0.45rem 0.55rem 0.55rem;
	border: 1px solid #2c3340;
	border-radius: 0.25rem;
}

.create-dye-fieldset legend {
	padding: 0 0.25rem;
	color: #9aa3b2;
	font-size: 0.85rem;
}

.create-dye-fieldset label {
	margin: 0.25rem 0;
}

.create-dye-fieldset input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
}

#create-panel #create-form>button[type="submit"] {
	width: 100%;
	margin-top: 0.75rem;
}

label,
.character-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0.5rem 0;
}

input,
select,
button {
	font: inherit;
	background: #101216;
	color: inherit;
	border: 1px solid #3a4250;
	padding: 0.3rem 0.5rem;
}

button {
	cursor: pointer;
}

.error {
	color: #f0a0a0;
	min-height: 1.2em;
}

.hint {
	color: #9aa3b2;
	font-size: 0.9rem;
}

.asset-load {
	width: min(22rem, 100%);
	margin: 0.75rem 0 0.5rem;
}

.asset-load progress {
	display: block;
	width: 100%;
	height: 0.55rem;
}

.asset-load progress::-webkit-progress-bar {
	background: #1a1f28;
	border-radius: 0.2rem;
}

.asset-load progress::-webkit-progress-value {
	background: #d4c48a;
	border-radius: 0.2rem;
}

.asset-load progress::-moz-progress-bar {
	background: #d4c48a;
	border-radius: 0.2rem;
}

#asset-load-label {
	margin: 0.45rem 0 0;
	text-align: center;
}

a {
	color: #d4c48a;
}

.hair-controls {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 0.45rem 0.75rem;
	align-items: center;
	margin: 0.75rem 0;
}

.hair-controls canvas {
	grid-row: 1 / span 5;
	width: 64px;
	height: 96px;
	image-rendering: pixelated;
	background: #0c0e12;
	border: 1px solid #2c3340;
}

.hair-controls label {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.2rem;
	margin: 0;
	font-size: 0.8rem;
}

.hair-controls input[type="range"] {
	width: 100%;
	padding: 0;
}

.hair-swatch {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid #3a4250;
	border-radius: 2px;
}

#barber-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, 92vw);
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#barber-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

#nametag {
	position: fixed;
	z-index: 4;
	pointer-events: none;
	transform: translate(-50%, -100%);
	background: rgba(12, 14, 18, 0.88);
	border: 1px solid #3a4250;
	padding: 0.1rem 0.45rem;
	font-size: 0.85rem;
}

#nametag.friend-name,
#world-tooltip.friend-name {
	color: #e8c84a;
}

.friend-account {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.35rem;
}

.friend-account-header {
	align-items: center;
}

.friend-status-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.friend-status-dot.online {
	background: #3ecf6a;
}

.friend-status-dot.offline {
	background: #c44a4a;
}

.friend-account-copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

button.friend-account-name {
	flex: 1;
	text-align: left;
	background: transparent;
	border: none;
	color: inherit;
	padding: 0.15rem 0;
	cursor: pointer;
	font: inherit;
}

button.friend-account-name:hover {
	color: #e8c84a;
}

.friend-playing-as {
	font-size: 0.78rem;
	opacity: 0.75;
	line-height: 1.2;
}

.friend-character-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-left: 0.35rem;
	border-left: 2px solid #2c3340;
}

.friend-character-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.friend-char-preview {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

#context-menu {
	position: fixed;
	z-index: 20;
	min-width: 140px;
	background: #161a22;
	border: 1px solid #3a4250;
	padding: 0.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

#context-menu[hidden] {
	display: none !important;
}

#context-menu button {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #e8ecf4;
	padding: 0.35rem 0.55rem;
	cursor: pointer;
}

#context-menu button:hover {
	background: #2a3140;
}

#inspect-backdrop {
	position: fixed;
	inset: 0;
	z-index: 6;
	background: rgba(0, 0, 0, 0.45);
}

#inspect-modal {
	position: fixed;
	z-index: 7;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	width: min(360px, 92vw);
	background: #161a22;
	border: 1px solid #3a4250;
	padding: 0.85rem 1rem 1rem;
}

#inspect-modal header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

#inspect-action {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

#death-backdrop {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: rgba(0, 0, 0, 0.72);
}

#death-modal {
	position: fixed;
	z-index: 21;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);
	width: min(380px, 92vw);
	background: #161a22;
	border: 1px solid #713b3b;
	padding: 1rem 1.15rem 1.15rem;
	text-align: center;
}

#death-respawn {
	min-width: 9rem;
}

#friends-panel {
	position: fixed;
	z-index: 5;
	top: 48px;
	right: 0.75rem;
	width: min(280px, 92vw);
	max-height: calc(100vh - 64px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem;
}

#skills-panel {
	position: fixed;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, 94vw);
	max-height: calc(100vh - 80px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.skills-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem 0.75rem;
	margin: 0.5rem 0;
}

.skills-combat-level {
	margin: 0.35rem 0 0.15rem;
	padding: 0.45rem 0.55rem;
	background: #12151b;
	border: 1px solid #2c3340;
	font-weight: 600;
	text-align: center;
}

.skill-row {
	display: flex;
	gap: 0.55rem;
	align-items: stretch;
	min-width: 0;
}

.skill-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: #101216;
	border: 1px solid #3a4250;
}

.skill-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	min-width: 0;
}

.skill-title {
	font-size: 0.85rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.skill-xp-track {
	height: 8px;
	background: #101216;
	border: 1px solid #3a4250;
	border-radius: 4px;
	overflow: hidden;
}

.skill-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, #6a7a40, #d4c48a);
	border-radius: 3px;
	transition: width 0.25s ease-out;
}

#spells-panel {
	position: fixed;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, 94vw);
	max-height: calc(100vh - 80px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.spell-autocast-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.35rem 0 0.75rem;
	font-size: 0.92rem;
	color: #c8d0dc;
}

.spells-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem;
	margin: 0.5rem 0;
}

.spell-row {
	display: flex;
	gap: 0.55rem;
	align-items: stretch;
	min-width: 0;
	padding: 0.45rem;
	border: 1px solid #2c3340;
	border-radius: 8px;
	background: #12151b;
}

.spell-row.armed {
	border-color: #6eb5ff;
	box-shadow: 0 0 0 1px rgba(110, 181, 255, 0.35);
}

.spell-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: #101216;
	border: 1px solid #3a4250;
}

.spell-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.spell-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	min-width: 0;
}

.spell-title {
	font-weight: 600;
	color: #eef2f8;
}

.spell-meta {
	font-weight: 400;
	font-size: 0.85rem;
	color: #9aa3b2;
}

.spell-desc {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.35;
}

.spell-max-hit {
	margin: 0.15rem 0 0.35rem;
	font-size: 0.82rem;
}

.spell-actions {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.15rem;
}

.spell-favorite-btn,
.spell-arm-btn {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	border: 1px solid #3a4250;
	background: #1f2430;
	color: #eef2f8;
	cursor: pointer;
}

.spell-favorite-btn:disabled,
.spell-arm-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#spell-favorites-bar {
	position: fixed;
	z-index: 5;
	left: 0.75rem;
	bottom: 0.65rem;
	display: flex;
	gap: 0.35rem;
	padding: 0.35rem;
	border-radius: 10px;
	background: rgba(18, 21, 27, 0.94);
	border: 1px solid #2c3340;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.spell-favorite-slot {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 8px;
	border: 2px solid #3a4250;
	background: #1a1e26;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.spell-favorite-slot.armed {
	border-color: #8fd0ff;
	background: #1e2a38;
	box-shadow:
		0 0 0 2px rgba(143, 208, 255, 0.45),
		0 0 14px rgba(110, 181, 255, 0.55);
	transform: translateY(-2px);
}

.spell-favorite-slot.staff-attack {
	border-width: 3px;
	border-color: #3de0d0;
	box-shadow:
		0 0 0 2px rgba(61, 224, 208, 0.55),
		0 0 12px rgba(40, 190, 180, 0.45);
}

.spell-favorite-slot.staff-attack.armed {
	border-color: #5ef0e2;
	box-shadow:
		0 0 0 2px rgba(94, 240, 226, 0.6),
		0 0 14px rgba(61, 224, 208, 0.55),
		0 0 14px rgba(110, 181, 255, 0.35);
}

.spell-favorite-slot.dragging {
	opacity: 0.55;
}

.spell-favorite-slot.drag-over {
	border-color: #c9d4e8;
	transform: translateY(-2px);
}

.spell-favorite-slot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.spell-favorite-slot:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#bag-panel,
#bank-panel {
	position: fixed;
	z-index: 5;
	top: 48px;
	left: 0.75rem;
	width: min(320px, 92vw);
	max-height: calc(100vh - 64px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem;
}

.bag-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

.bag-header h2 {
	margin: 0;
}

.bag-max-hit {
	margin: 0;
	font-size: 0.85rem;
	white-space: nowrap;
}

#bank-panel {
	left: auto;
	right: 0.75rem;
	width: min(340px, 92vw);
}

#bank-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bank-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0.4rem 0;
}

.bank-tab {
	flex: 1;
	font-size: 0.8rem;
	padding: 0.3rem 0.4rem;
}

.bank-tab.active {
	outline: 1px solid #d4c48a;
}

.item-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.25rem;
	margin: 0.4rem 0;
}

.item-grid.equip {
	grid-template-columns: repeat(3, 1fr);
}

.item-slot {
	position: relative;
	min-height: 36px;
	padding: 0.15rem;
	image-rendering: pixelated;
}

.item-slot img {
	width: 100%;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

.item-slot.selected {
	outline: 2px solid #d4c48a;
}

.item-slot.dragging {
	opacity: 0.45;
}

.item-slot.drag-over {
	outline: 2px solid #6a8caf;
}

.item-slot .qty {
	position: absolute;
	right: 2px;
	bottom: 1px;
	font-size: 0.7rem;
}

.bag-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 5;
	background: rgba(8, 10, 14, 0.55);
}

#send-panel,
#send-target-panel,
#letter-panel,
#transfer-panel,
#write-cheque-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(380px, 92vw);
	max-height: min(80vh, 640px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.85rem 1rem 1rem;
}

#craft-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, 94vw);
	max-height: min(85vh, 720px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.85rem 1rem 1rem;
}

#craft-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

/* Above #craft-panel so tailor dye choice is not buried under the station UI. */
#dye-picker-backdrop {
	z-index: 7;
}

#dye-picker-panel {
	position: fixed;
	z-index: 8;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(420px, 94vw);
	max-height: min(85vh, 720px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.85rem 1rem 1rem;
}

#dye-picker-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

/* Above #craft-panel (and dye picker) so Craft x quantity is usable. */
#craft-qty-backdrop {
	z-index: 9;
	pointer-events: auto;
}

#craft-qty-panel {
	position: fixed;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(320px, 92vw);
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
	pointer-events: auto;
}

#craft-qty-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

#cauldron-panel,
#cauldron-pick-panel,
#cauldron-dye-confirm-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, 92vw);
	max-height: min(85vh, 720px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.85rem 1rem 1rem;
}

#cauldron-pick-panel,
#cauldron-dye-confirm-panel {
	z-index: 7;
	width: min(420px, 94vw);
}

#cauldron-panel header,
#cauldron-pick-panel header,
#cauldron-dye-confirm-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.cauldron-tabs {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.65rem;
}

.cauldron-tab {
	flex: 1;
}

.cauldron-tab.active {
	border-color: #d4c48a;
	background: #2a3140;
}

.cauldron-slots,
.cauldron-inserts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.35rem;
	margin-bottom: 0.35rem;
}

.cauldron-dye-slots {
	grid-template-columns: repeat(3, 1fr);
}

.cauldron-slot,
.cauldron-insert,
.cauldron-pick-item {
	min-height: 3rem;
	display: grid;
	place-items: center;
	position: relative;
	background: #12151c;
}

.cauldron-slot.locked {
	opacity: 0.72;
	cursor: default;
}

.cauldron-slot:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.cauldron-slot img,
.cauldron-pick-item img {
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}

.cauldron-slot .qty {
	position: absolute;
	right: 0.2rem;
	bottom: 0.1rem;
	font-size: 0.75rem;
}

.cauldron-vessel {
	text-align: center;
	font-size: 2rem;
	margin: 0.35rem 0;
	opacity: 0.85;
}

.cauldron-flavor {
	margin: 0.15rem 0 0.45rem;
	font-style: italic;
	color: #c8c0a8;
	font-size: 0.92rem;
	text-align: center;
}

.cauldron-actions,
.cauldron-finish {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.35rem 0;
}

.cauldron-actions button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cauldron-steps {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
	color: #9aa3b2;
	font-size: 0.9rem;
}

.cauldron-pick-list {
	display: grid;
	gap: 0.35rem;
	max-height: 40vh;
	overflow: auto;
	margin-bottom: 0.5rem;
}

.cauldron-pick-item {
	grid-template-columns: 36px 1fr;
	justify-items: start;
	padding: 0.35rem 0.5rem;
	gap: 0.5rem;
}

.cauldron-pick-item.selected {
	border-color: #d4c48a;
}

.cauldron-pick-qty {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.craft-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	align-items: start;
}

@media (max-width: 520px) {
	.craft-layout {
		grid-template-columns: 1fr;
	}
}

.craft-recipe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
}

.craft-recipe-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.35rem 0.25rem;
	min-height: 72px;
	background: #12151c;
	border: 1px solid #2c3340;
	cursor: pointer;
}

.craft-recipe-cell.craftable {
	border-color: #3f9d62;
	box-shadow: inset 0 0 0 1px rgba(63, 157, 98, 0.85);
}

.craft-recipe-cell.level-locked {
	border-color: #b04343;
	box-shadow: inset 0 0 0 1px rgba(176, 67, 67, 0.85);
}

.craft-recipe-cell.selected {
	outline: 2px solid #d4c48a;
}

.craft-recipe-cell img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	image-rendering: pixelated;
}

.craft-dye-cell {
	min-height: 48px;
	justify-content: center;
}

.craft-recipe-name {
	font-size: 0.72rem;
	text-align: center;
	line-height: 1.15;
	word-break: break-word;
}

.craft-detail {
	min-height: 160px;
	padding: 0.35rem;
	background: #12151c;
	border: 1px solid #2c3340;
}

.craft-material-controls {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #2c3340;
}

.craft-material-controls[hidden] {
	display: none !important;
}

.craft-material-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	color: #c8c2b4;
}

.craft-material-field select {
	background: #1a1e26;
	border: 1px solid #3a4252;
	color: #f0ebe0;
	padding: 0.35rem 0.45rem;
}

.craft-tailor-dye {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #c8c2b4;
}

.craft-tailor-dye[hidden] {
	display: none !important;
}

.craft-tailor-dye img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	image-rendering: pixelated;
}

.craft-output {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.craft-output img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	image-rendering: pixelated;
}

.craft-output h3 {
	margin: 0;
	font-size: 0.95rem;
	text-align: center;
}

.craft-inputs {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}

.craft-input-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
}

.craft-input-row.short {
	color: #c07070;
}

.craft-input-row img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	image-rendering: pixelated;
}

.craft-progress {
	height: 8px;
	margin: 0.4rem 0;
	background: #0e1014;
	border: 1px solid #2c3340;
	border-radius: 2px;
	overflow: hidden;
	visibility: hidden;
}

.craft-progress.is-active {
	visibility: visible;
}

.craft-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #6a7a40, #d4c48a);
	transition: width 0.05s linear;
}

#craft-status {
	min-height: 1.25em;
	margin: 0.35rem 0 0.15rem;
}

#craft-button {
	width: 100%;
	margin-top: 0.25rem;
}

#craft-button:disabled {
	opacity: 0.45;
}

#send-target-panel {
	z-index: 7;
}

#send-panel header,
#send-target-panel header,
#letter-panel header,
#transfer-panel header,
#write-cheque-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

#send-panel[hidden],
#send-target-panel[hidden],
#letter-panel[hidden],
#transfer-panel[hidden],
#write-cheque-panel[hidden],
.modal-backdrop[hidden] {
	display: none !important;
}

#tip-arrows-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(360px, 92vw);
	padding: 1rem 1.1rem 1.1rem;
	background: #1a1e26;
	border: 1px solid #2c3340;
	border-radius: 6px;
	color: #d6dbe4;
}

#tip-arrows-panel h2 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.tip-arrows-hint,
.tip-arrows-capacity {
	margin: 0.25rem 0 0.75rem;
	font-size: 0.85rem;
	opacity: 0.85;
}

.tip-arrows-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0.75rem 0;
}

.tip-arrows-slot {
	position: relative;
	width: 48px;
	height: 48px;
	border: 1px solid #3a4454;
	background: #12161d;
	display: grid;
	place-items: center;
	padding: 0;
	color: #8a94a6;
	cursor: default;
}

.tip-arrows-slot img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	image-rendering: pixelated;
}

.tip-arrows-slot .qty {
	position: absolute;
	right: 2px;
	bottom: 1px;
	font-size: 0.7rem;
}

.tip-arrows-pick {
	cursor: pointer;
}

.tip-arrows-arrow {
	opacity: 0.6;
}

.tip-arrows-qty-label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
}

.tip-arrows-qty {
	width: 6rem;
	padding: 0.25rem 0.4rem;
	background: #12161d;
	border: 1px solid #3a4454;
	color: inherit;
}

.tip-arrows-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tip-arrows-picker {
	margin-top: 0.75rem;
	max-height: 180px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.tip-arrows-pick-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem;
	background: #12161d;
	border: 1px solid #2c3340;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.tip-arrows-pick-option img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	image-rendering: pixelated;
}

.send-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0;
}

.send-item img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	image-rendering: pixelated;
}

.send-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0.5rem 0;
	font-size: 0.9rem;
}

.send-target-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	text-align: left;
	margin: 0.3rem 0;
}

.send-target-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.send-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.75rem;
}

.send-search input {
	flex: 1 1 6rem;
}

.char-preview {
	position: relative;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	image-rendering: pixelated;
	background: #101216;
	border: 1px solid #2c3340;
	overflow: hidden;
}

.char-preview img,
.char-preview canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
}

#letter-body {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	resize: none;
	overflow: hidden;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.45;
	min-height: 8rem;
	field-sizing: content;
}

.letter-paper {
	background: #f4f0e4;
	color: #1c1814;
	padding: 1.25rem 1.35rem;
	margin: 0.35rem 0 0.75rem;
	max-height: min(55vh, 420px);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	box-shadow: inset 0 0 0 1px rgba(40, 32, 24, 0.08);
}

.letter-paper::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.letter-signature {
	margin: 1.35rem 0 0;
	padding: 0;
	border: none;
	background: transparent;
	white-space: pre-wrap;
	font: inherit;
	color: inherit;
	line-height: 1.45;
}

#friends-panel h2,
#friends-panel h3 {
	margin: 0.4rem 0;
	font-size: 0.95rem;
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	margin: 0.35rem 0;
}

#inspect-modal[hidden],
#inspect-backdrop[hidden],
#death-modal[hidden],
#death-backdrop[hidden],
#friends-panel[hidden],
#skills-panel[hidden],
#spells-panel[hidden],
#spell-favorites-bar[hidden],
#bag-panel[hidden],
#bank-panel[hidden],
#craft-panel[hidden],
#craft-backdrop[hidden],
#craft-qty-panel[hidden],
#craft-qty-backdrop[hidden],
#dye-picker-panel[hidden],
#dye-picker-backdrop[hidden],
#cauldron-panel[hidden],
#cauldron-backdrop[hidden],
#cauldron-pick-panel[hidden],
#cauldron-pick-backdrop[hidden],
#cauldron-dye-confirm-panel[hidden],
#cauldron-dye-confirm-backdrop[hidden],
#shop-panel[hidden],
#shop-backdrop[hidden],
#shop-qty-panel[hidden],
#shop-qty-backdrop[hidden],
#trade-panel[hidden],
#trade-backdrop[hidden],
#trade-qty-panel[hidden],
#trade-qty-backdrop[hidden],
#nametag[hidden],
#chat-bar[hidden],
.shop-pane[hidden],
.shop-detail[hidden],
.shop-bag-warn[hidden] {
	display: none !important;
}

#chat-bar {
	position: fixed;
	z-index: 5;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	width: min(640px, calc(100vw - 2rem));
}

#chat-bar input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.75rem;
	background: rgba(12, 14, 18, 0.92);
}

#vitals {
	position: fixed;
	z-index: 4;
	right: 1rem;
	bottom: 1.25rem;
	display: flex;
	flex-direction: row;
	gap: 0.45rem;
	align-items: flex-end;
}

#vitals[hidden] {
	display: none !important;
}

#status-effects {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.3rem;
	align-items: center;
	max-height: 120px;
	overflow: visible;
}

#status-effects[hidden] {
	display: none !important;
}

.status-effect-icon {
	width: 28px;
	height: 28px;
	padding: 2px;
	box-sizing: border-box;
	border: 1px solid #3a4250;
	background: rgba(12, 14, 18, 0.88);
	cursor: default;
	display: grid;
	place-items: center;
	image-rendering: pixelated;
}

.status-effect-icon img {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
	pointer-events: none;
}

.status-effect-buff {
	border-color: #4a7a58;
}

.status-effect-debuff {
	border-color: #7a4a4a;
}

.status-effect-icon-fallback {
	font-size: 0.75rem;
	font-weight: 700;
	color: #d0d6e0;
}

#status-effect-tooltip {
	position: fixed;
	z-index: 20;
	min-width: 10rem;
	max-width: 16rem;
	padding: 0.45rem 0.55rem;
	background: rgba(12, 14, 18, 0.96);
	border: 1px solid #3a4250;
	color: #d0d6e0;
	font-size: 0.78rem;
	line-height: 1.35;
	pointer-events: none;
}

#status-effect-tooltip[hidden] {
	display: none !important;
}

#status-effect-tooltip strong {
	display: block;
	margin-bottom: 0.2rem;
	color: #f0f2f6;
	font-size: 0.82rem;
}

#status-effect-tooltip p {
	margin: 0.15rem 0 0;
}

#status-effect-tooltip .status-effect-tooltip-time {
	color: #9aa3b2;
	font-size: 0.72rem;
}

#status-effect-tooltip[data-polarity="buff"] {
	border-color: #4a7a58;
}

#status-effect-tooltip[data-polarity="debuff"] {
	border-color: #7a4a4a;
}

#stamina-bar,
#health-bar {
	position: relative;
	width: 14px;
	height: 120px;
	padding: 3px;
	box-sizing: border-box;
	background: rgba(12, 14, 18, 0.82);
	border: 1px solid #3a4250;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
}

#stamina-bar[hidden],
#health-bar[hidden] {
	display: none !important;
}

#stamina-bar-fill,
#health-bar-fill {
	flex: 1;
	width: 100%;
	transform-origin: bottom center;
	transform: scaleY(1);
	border-radius: 1px;
	transition: transform 80ms linear;
}

#stamina-bar-fill {
	background: linear-gradient(180deg, #6ecf8a 0%, #3a8a58 100%);
}

#health-bar-fill {
	background: linear-gradient(180deg, #e06060 0%, #a02828 100%);
}

#stamina-bar.empty #stamina-bar-fill {
	background: #4a3030;
}

#health-bar.empty #health-bar-fill {
	background: #3a2020;
}

#stamina-bar.low #stamina-bar-fill {
	background: linear-gradient(180deg, #d4c48a 0%, #a08040 100%);
}

#health-bar.low #health-bar-fill {
	background: linear-gradient(180deg, #f0a040 0%, #c05020 100%);
}

.stamina-bar-label,
.health-bar-label {
	position: absolute;
	left: 50%;
	top: calc(100% + 0.25rem);
	transform: translateX(-50%);
	font-size: 0.65rem;
	color: #9aa3b2;
	white-space: nowrap;
	pointer-events: none;
}

#damage-numbers {
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}

.damage-number {
	position: absolute;
	transform: translate(-50%, -100%);
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

#skill-level-floats {
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}

.skill-level-float {
	position: absolute;
	transform: translate(-50%, -100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	pointer-events: none;
	user-select: none;
}

.skill-level-float-level {
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffe8a8;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	line-height: 1;
	letter-spacing: 0.02em;
}

.skill-level-float-icon {
	width: 28px;
	height: 28px;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

#shop-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, 94vw);
	max-height: min(80vh, 640px);
	display: flex;
	flex-direction: column;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#shop-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}

.shop-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0.35rem 0 0.65rem;
}

.shop-tab {
	flex: 1;
	font-size: 0.85rem;
	padding: 0.35rem 0.4rem;
	background: #12151b;
	border: 1px solid #2c3340;
	color: inherit;
}

.shop-tab.active {
	outline: 1px solid #6a8caf;
	border-color: #6a8caf;
}

.shop-pane {
	min-height: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.shop-body {
	display: grid;
	grid-template-columns: 1fr minmax(180px, 42%);
	gap: 0.85rem;
	min-height: 0;
	flex: 1;
	overflow: hidden;
}

.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 0.35rem;
	align-content: start;
	overflow: auto;
	padding: 0.15rem;
	min-height: 120px;
	max-height: min(50vh, 360px);
}

.shop-sell-grid {
	align-content: start;
	overflow: auto;
	max-height: min(50vh, 360px);
	margin: 0;
}

.shop-sell-grid .item-slot.disabled {
	opacity: 0.35;
	cursor: default;
}

.shop-cell {
	width: 40px;
	height: 40px;
	padding: 0;
	display: grid;
	place-items: center;
	background: #12151c;
	border: 1px solid #2c3340;
	cursor: pointer;
}

.shop-cell.selected {
	border-color: #8ab4ff;
	box-shadow: inset 0 0 0 1px #8ab4ff;
}

.shop-cell img {
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}

.shop-detail {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
	padding: 0.35rem 0.15rem;
	border-left: 1px solid #2c3340;
	padding-left: 0.85rem;
	min-width: 0;
}

.shop-detail img {
	width: 48px;
	height: 48px;
	image-rendering: pixelated;
}

.shop-buy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.25rem;
}

.shop-bag-warn {
	margin: 0.35rem 0 0;
	color: #e6b35a;
	font-size: 0.85rem;
	line-height: 1.3;
}

.shop-coins {
	margin: 0;
	padding: 0;
	border: none;
	font-weight: 600;
}

#shop-qty-panel {
	position: fixed;
	z-index: 7;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(320px, 92vw);
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#shop-qty-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

#market-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, 94vw);
	max-height: min(85vh, 720px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#market-panel[hidden],
#market-backdrop[hidden] {
	display: none !important;
}

#market-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.market-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0.5rem 0 0.75rem;
}

.market-tab {
	flex: 1;
	font-size: 0.85rem;
	padding: 0.35rem 0.4rem;
	background: #12151b;
	border: 1px solid #2c3340;
	color: inherit;
}

.market-tab.active {
	outline: 1px solid #6a8caf;
	border-color: #6a8caf;
}

.market-pane {
	margin-top: 0.25rem;
}

.market-catalog {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-height: 220px;
	overflow: auto;
	margin-bottom: 0.5rem;
}

#market-sell-list.item-grid {
	max-height: none;
	margin-bottom: 0.5rem;
}

.market-catalog-row,
.market-order-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	background: #12151b;
	border: 1px solid #2c3340;
	color: inherit;
	padding: 0.35rem 0.5rem;
	text-align: left;
}

.market-catalog-row.selected {
	border-color: #6a8caf;
}

#market-sell-list .item-slot.disabled {
	opacity: 0.4;
}

#market-sell-qty:disabled,
#market-sell-qty[readonly] {
	opacity: 0.7;
}

.market-sell-actions {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.market-price-suggest {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #9aa3b2;
	font: inherit;
	font-size: 0.85rem;
	text-align: right;
	cursor: pointer;
}

.market-price-suggest:hover {
	color: #d4c48a;
	text-decoration: underline;
}


#shop-qty-backdrop {
	z-index: 7;
}

.chat-bubble {
	position: fixed;
	z-index: 4;
	pointer-events: none;
	transform: translate(-50%, -100%);
	max-width: min(280px, 70vw);
	background: rgba(16, 18, 24, 0.92);
	border: 1px solid #3a4250;
	border-radius: 8px;
	padding: 0.3rem 0.55rem;
	font-size: 0.9rem;
	line-height: 1.25;
	white-space: pre-wrap;
	word-break: break-word;
}

.chat-bubble[hidden] {
	display: none !important;
}

.item-bubble {
	position: fixed;
	z-index: 4;
	pointer-events: none;
	transform: translate(-50%, -100%) scale(0.5);
	transform-origin: bottom center;
	background: rgba(16, 18, 24, 0.92);
	border: 1px solid #3a4250;
	border-radius: 8px;
	padding: 0.35rem;
	line-height: 0;
}

.item-bubble img {
	display: block;
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}

.item-bubble[hidden] {
	display: none !important;
}

#bounty-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(420px, 92vw);
	max-height: min(70vh, 520px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#bounty-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.bounty-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0.5rem 0 0.75rem;
}

.bounty-tab {
	flex: 1;
	font-size: 0.85rem;
	padding: 0.35rem 0.4rem;
	background: #12151b;
	border: 1px solid #2c3340;
	color: inherit;
}

.bounty-tab.active {
	outline: 1px solid #6a8caf;
	border-color: #6a8caf;
}

.bounty-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: end;
	margin-bottom: 0.75rem;
}

.bounty-search-row label {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.8rem;
}

.bounty-search-row input,
.bounty-amount-label input {
	background: #12151b;
	border: 1px solid #2c3340;
	color: inherit;
	padding: 0.35rem 0.4rem;
	min-width: 6rem;
}

.bounty-target {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 0.75rem;
	min-height: 48px;
}

.bounty-amount-label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}

.bounty-my-amount {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0.5rem 0 0;
}

.bounty-payoff {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid #2c3340;
}

.toast.toast-clickable:hover {
	border-color: #7a889c;
	background: rgba(22, 26, 34, 0.96);
}

#quests-list-panel,
#quests-detail-panel {
	position: fixed;
	z-index: 6;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, 94vw);
	max-height: min(80vh, 640px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.85rem 1rem 1rem;
}

#quests-detail-panel {
	width: min(720px, 96vw);
}

#quests-list-panel header,
#quests-detail-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
}

.quests-detail-actions {
	display: flex;
	gap: 0.35rem;
}

#quests-list-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.quests-list-item {
	text-align: left;
	width: 100%;
}

.quests-detail-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.quests-detail-layout section h3 {
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
}

.quests-journal-entry {
	margin: 0 0 0.55rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid #2c3340;
	color: #d6d1c4;
}

.quests-objectives {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.quests-objectives li.done {
	text-decoration: line-through;
	color: #8a909c;
}

#dialogue-panel {
	position: fixed;
	z-index: 6;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	width: min(520px, 94vw);
	max-height: min(45vh, 360px);
	overflow: auto;
	background: #1a1e26;
	border: 1px solid #2c3340;
	padding: 0.75rem 1rem 1rem;
}

#dialogue-panel header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

#dialogue-title {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #a8b0bc;
	letter-spacing: 0.02em;
}

.dialogue-line {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.35rem 0;
	line-height: 1.35;
}

.dialogue-speaker-icon {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	image-rendering: pixelated;
	margin-top: 0;
}

.dialogue-line-text {
	flex: 1;
}

.dialogue-line-player {
	color: #c9d4e8;
}

.dialogue-line-reward {
	justify-content: center;
}

.dialogue-reward-text {
	color: #d4b45a;
	font-style: italic;
	font-weight: 600;
	text-align: center;
}

.dialogue-triggers {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.dialogue-next {
	margin-left: auto;
}

@media (max-width: 640px) {
	.quests-detail-layout {
		grid-template-columns: 1fr;
	}
}

#quests-list-panel[hidden],
#quests-detail-panel[hidden],
#dialogue-panel[hidden],
#quests-list-backdrop[hidden],
#quests-detail-backdrop[hidden] {
	display: none !important;
}